<!--Видео на сайт-->
<video preload="auto" class="video_source_block1" playsinline autoplay loop muted>
    <!--Укажите здесь свою ссылку на видеофайл-->
    <source src="https://drive.google.com/uc?export=download&id=1Xz4LpBv24oRTje0oQHJroqhrY0w0MvR3">
</video>

<script>
    $(document).ready(function(){
    $('.video_source_block1').appendTo('.video_zero_block1 div');
});
</script>

<style>
.video_zero_block1 {
  overflow: hidden; /*Сотрите это свойство, если у вас включен автоскейл*/
}
.video_zero_block1 .tn-atom {
    background-image: none !important;
    background-color: transparent !important;
}
.video_zero_block1 video {
    object-fit: cover;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px; /*Радиус скругления углов у видео*/
}
</style>

<!--Видео на сайт-->
<video preload="auto" class="video_source_block2" playsinline autoplay loop muted>
    <!--Укажите здесь свою ссылку на видеофайл-->
    <source src="https://drive.google.com/uc?export=download&id=1kjkLSckJxA_NFibGJQS9BsHmKqDc1DFG">
</video>

<script>
    $(document).ready(function(){
    $('.video_source_block2').appendTo('.video_zero_block2 div');
});
</script>

<style>
.video_zero_block2 {
  overflow: hidden; /*Сотрите это свойство, если у вас включен автоскейл*/
}
.video_zero_block2 .tn-atom {
    background-image: none !important;
    background-color: transparent !important;
}
.video_zero_block2 video {
    object-fit: cover;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px; /*Радиус скругления углов у видео*/
}
</style>

<!--Видео на сайт-->
<video preload="auto" class="video_source_block3" playsinline autoplay loop muted>
    <!--Укажите здесь свою ссылку на видеофайл-->
    <source src="https://drive.google.com/uc?export=download&id=1zimF1VMvyFqmj7N_fck-d2pYNWSpd8Lm">
</video>

<script>
    $(document).ready(function(){
    $('.video_source_block3').appendTo('.video_zero_block3 div');
});
</script>

<style>
.video_zero_block3 {
  overflow: hidden; /*Сотрите это свойство, если у вас включен автоскейл*/
}
.video_zero_block3 .tn-atom {
    background-image: none !important;
    background-color: transparent !important;
}
.video_zero_block3 video {
    object-fit: cover;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px; /*Радиус скругления углов у видео*/
}
</style>

<!--Видео на сайт-->
<video preload="auto" class="video_source_block" playsinline autoplay loop muted>
    <!--Укажите здесь свою ссылку на видеофайл-->
    <source src="https://drive.google.com/uc?export=download&id=1W4hunRaVPnBXAUtdym9vIDm6KDPTlcan">
</video>

<script>
    $(document).ready(function(){
    $('.video_source_block').appendTo('.video_zero_block div');
});
</script>

<style>
.video_zero_block {
  overflow: hidden; /*Сотрите это свойство, если у вас включен автоскейл*/
}
.video_zero_block .tn-atom {
    background-image: none !important;
    background-color: transparent !important;
}
.video_zero_block video {
    object-fit: cover;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px; /*Радиус скругления углов у видео*/
}
</style>

<style>
    /* Установите начальное состояние для текста без подчеркивания */
    .underlined-text {
        text-decoration: none;

        display: inline-block;
    }

    /* Анимация подчеркивания */
    .underlined-text::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 0;
        height: 20px; /* Изменение высоты подчеркивания */
        background-color: #000;
        transition: width 2.3s ease-in-out; /* Изменение скорости анимации */
    }

    /* Анимация увеличения подчеркивания */
    .underlined-text.underline-on-scroll::after {
        width: 100%;
    }
</style>

<script>
    // Получите все элементы с классом "underlined-text"
    const elements = document.querySelectorAll('.underlined-text');

    // Функция для проверки, виден ли элемент на экране
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
        );
    }

    // Функция для добавления класса "underline-on-scroll" при появлении элемента на экране
    function handleScroll() {
        elements.forEach(element => {
            if (isElementInViewport(element)) {
                element.classList.add('underline-on-scroll');
            } else {
                element.classList.remove('underline-on-scroll');
            }
        });
    }

    // Обработчик события прокрутки страницы
    window.addEventListener('scroll', handleScroll);
</script>

<style>
.videowrapper {
    position: relative;
    overflow: hidden;
}
.videowrapper,
.tn-atom.tn-atom__html {
    width: inherit;
    height: inherit;
}
.bg_image {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: all 0.2s;
}
.video-btn {
    position: absolute;
    background-color: rgb(0 0 0 / 70%);
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    transition: all 0.2s;
    transform: translateY(100%);
    backdrop-filter: invert(1);
}
.video-btn a, .video-btn div {
    width: inherit;
    height: inherit;
}
.video-btn div {
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.video-btn div {
    transition: all 0.2s 0.2s;
    transform: translateY(100%);
}
.videowrapper:hover .video-btn div {
    transform: translateY(0);
}
.video-btn a {
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 300;
    color: #fff !important;
    font-size: 16px;
}
.videowrapper:hover .video-btn {
    transform: translateY(0);
}
.videowrapper:hover .bg_image {opacity:0}
video {object-fit: cover}
</style>


<script>
$(document).ready(function(){
$(document).on('mouseover mouseenter touchstart touchmove click', '.videowrapper', function(){
    $(this).find('video').trigger('play');
    let video = $(this).find('video')[0];
    let videoload = setInterval(function() {
    if (  video.readyState === 4  ) {
        $('.vload .tn-atom').text('start');
        clearInterval(videoload);
    };
}, 50);   
});
$(document).on('mouseleave', '.videowrapper', function(){
    $(this).find('video').trigger('pause');
});
});
</script>