<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>

			<style>
.video_promo {
    width: 250px; /*Ширина видео*/
    position: fixed;
    bottom: 50px; /*Отступ снизу */
    right: 25px; /*Отступ справа */
    z-index: 999; /*Номер слоя */
    cursor:pointer;
}
.video_promo_max{ width: 400px} /*Ширина видео открытое состояние*/
video#videobanner {
    border-radius: 15px;
    border: 3px solid #fff;
    box-shadow: 0 0 10px 2px #9c9c9c;
    cursor:pointer;
}
.video_promo , .button_video_promo , .close_video_promo {  transition: all 0.3s ease-in-out}
.button_video_promo , .close_video_promo {
    display:none;
    position: absolute;
}
.button_video_promo {
    font-family: 'Roboto',Arial,sans-serif;
    font-weight: 300;
    color: #fff;
    background-color: #fcb42f;
    padding: 10px 25px;
    border-radius: 6px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.close_video_promo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: 6px;
    right: 1px;
    background-size: cover;
    background-image: url(https://static.tildacdn.com/tild3964-6665-4661-a537-323039386538/845648.svg);
}
.close_video_promo_open {
    background-image: url(https://static.tildacdn.com/tild6162-6136-4465-a134-633834346163/3388940.svg);
}
.close_video_promo:hover {  filter: grayscale(1)}
.button_video_promo:hover { background-color: #efa318}

.video_promo:hover .close_video_promo{ display:block}
.small_promo:hover { transform: scale(1.03)}
.hide_video{transform: translateY(200%)}
.start_op{opacity:0}

@media screen and (max-width:640px){
.video_promo {width: 200px}
.video_promo_max{ width: 350px}
.close_video_promo{display:block}
}

@media screen and (max-width:420px){
.video_promo {width: 150px}
.video_promo_max{ width: 270px}
}

</style>

<div class="video_promo small_promo start_op">
    <video id='videobanner' width="100%" height="100%"   pip="false" autoplay loop muted playsinline controlslist="nodownload" disablepictureinpicture >
        <source src="https://dl.dropboxusercontent.com/s/xm4ouqlcykj2myq/IMG_9464-_1_.mp4" type="video/mp4">
    </video>
    <div class="close_video_promo"></div>
    <a href="#popup-video"><div class="button_video_promo">Learn More</div></a>
</div>

<script>
$(document).ready(function(){
let firstOpen=true;    
let videoBreakTime;
//При клике на видео   
$('.video_promo').on('click touchend','#videobanner',function(e){
    //Если видео увеличено
    if ($(".video_promo").hasClass("video_promo_max") ){
        //Запускаем или Останавливаем видео
        this[this.paused?"play":"pause"]();
    };
    //Если отрытие первый раз, то запускаем с самого начала
    if (firstOpen) {firstOpen=false; $(this).get(0).currentTime = 0;
    //Если нет, то с точки прерывания
    }else if ($(".video_promo").hasClass("small_promo") ){ $(this).get(0).currentTime = videoBreakTime  };

    //Изменяем иконку закрытия
    $('.close_video_promo').addClass('close_video_promo_open');
    $('.video_promo').addClass('video_promo_max').removeClass('small_promo');
    //Включаем звук
    $(this).prop('muted', false);
    //Показываем кнопку
    setTimeout(function(){ $('.button_video_promo').show()}, 300); 
});
//Уменьшение видео
function smallPromo(){
    if ($(".video_promo").hasClass("video_promo_max") ){    
    //Изменяем кнопку сворачивания
    $('.close_video_promo').removeClass('close_video_promo_open');
    //Скрываем кнопку
    $('.button_video_promo').hide();
    //Выключаем звук и запускаем видео
    $('#videobanner').prop('muted', true).get(0).play();
    //Получаем время прерывания видео
    videoBreakTime= Math.floor($('#videobanner').get(0).currentTime);
    $('.video_promo').removeClass('video_promo_max').addClass('small_promo');
    }
};
//При нажатии на кнопку внутри  - свернуть окно
$('.video_promo').on('click','.button_video_promo',function(e){ smallPromo()});
//При нажатии на кнопку свернуть - сворачиваем окно
$('.video_promo').on('click','.close_video_promo_open',function(e){ smallPromo()});
//При нажатии вне промо видео - сворачиваем окно
$(document).click( function(e){ if ( $(e.target).closest('.video_promo').length ) {return} smallPromo()});
//При нажатии esc или space - сворачиваем окно
$(document).keydown(function(eventObject){if( eventObject.which == 27 ||  eventObject.which == 32  ){	smallPromo()};});

//При клике на кнопку закрыть  
$('.close_video_promo').click(function(){
    if (!$(this).hasClass("close_video_promo_open") ){
    //Скрыть видео
    $('.video_promo').addClass('hide_video');    
    //Выключаем звук и останавливаем видео
    $('#videobanner').prop('muted', true).get(0).pause();
    };
});
//Показываем видео после запуска
let videoload = setInterval(function() {
    if ( $("#videobanner").get(0).paused ) {} else {
     clearInterval(videoload);
     $('.video_promo').removeClass('start_op');
    };
}, 300);   
});
</script>