<script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script>

<script>
$(document).ready(function(){
    
let classTrigger = 'imageHoverFly';
    
$(document).on('mouseover mouseenter touchstart touchmove click', 'div[class*="imageHoverFly"]', function(){
    
    let elemClass = $(this).attr('class');
    elemClass = elemClass.split(' ');
    let classNumber = '';
    for(let i=0; i<elemClass.length; i++){
        if(elemClass[i].includes(classTrigger))  classNumber = elemClass[i];
    };

    let videoWrp = $('#'+classNumber);
    
    if(videoWrp.length){
        videoWrp.addClass('play-vid');
        videoWrp.find('video').trigger('play');
        let video = videoWrp.find('video')[0];
        let videoload = setInterval(function() {
        if (  video.readyState === 4  ) {
            $('.vload .tn-atom').text('start');
            clearInterval(videoload);
            };
        }, 50); 
    };
    
});

$(document).on('mouseleave', 'div[class*="imageHoverFly"]', function(){
    let elemClass = $(this).attr('class');
    elemClass = elemClass.split(' ');
    let classNumber = '';
    for(let i=0; i<elemClass.length; i++){
        if(elemClass[i].includes(classTrigger))  classNumber = elemClass[i];
    };

    let videoWrp = $('#'+classNumber);
    
    if(videoWrp.length){
        videoWrp.removeClass('play-vid');
        videoWrp.find('video').trigger('pause');
    };
});


});
</script>

<style>

div[class*="imageHoverFly"] {
    cursor: pointer;
}


.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%);
}

.video-btn a {
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 300;
    color: #fff !important;
    font-size: 16px;
}



.videowrapper.play-vid .video-btn div {
    transform: translateY(0);
}
.videowrapper.play-vid .video-btn {
    transform: translateY(0);
}
.videowrapper.play-vid .bg_image {
    opacity:0
}



video {object-fit: cover}
</style>