Create a Sticky Video on Scroll in WordPress using Elementor

 

 

CSS code snippet for Sticky Video Effects:

selector{
    --sticky-width: 400px;
    --sticky-horizontal-distance: 25px;
    --sticky-vertical-distance: 25px;
    --sticky-animation: all;
}
selector .elementor-container,
selector .elementor-column,
selector .elementor-widget-wrap,
selector .sticky-video{
    position: static;
}
selector .sticky-video .elementor-widget-container{
    padding-bottom: 56.25%;
    position: relative;
    transform: none;
    overflow: visible;
}
selector .sticky-video .elementor-wrapper{
    position: absolute;
    width: 100%;
}
selector .sticky-video.activing .elementor-wrapper{
    position: fixed;
    z-index: 9;
}
selector .sticky-video.activing.active .elementor-wrapper{
    top: var(--sticky-vertical-distance) !important;
    left: var(--sticky-horizontal-distance) !important;
    width: var(--sticky-width) !important;
    width: min( var(--sticky-width), calc(100vw - var(--sticky-horizontal-distance)*2) ) !important;
    padding-bottom: calc(var(--sticky-width) * 9/16) !important;
    padding-bottom: min( calc(var(--sticky-width) * 9/16), calc( (100vw - var(--sticky-horizontal-distance)*2) * 9/16) ) !important;
    transition: var(--sticky-animation) 0.5s ease-in-out;
}
selector .sticky-video.activing.active.top-left .elementor-wrapper{
    top: var(--sticky-vertical-distance) !important;
    left: var(--sticky-horizontal-distance) !important;
}
selector .sticky-video.activing.active.top-right .elementor-wrapper{
    top: var(--sticky-vertical-distance) !important;
    left: calc(100% - var(--sticky-horizontal-distance) - var(--sticky-width)) !important;
    left: calc(100% - var(--sticky-horizontal-distance) - min( var(--sticky-width), calc(100vw - var(--sticky-horizontal-distance)*2) )) !important;
}
selector .sticky-video.activing.active.bottom-left .elementor-wrapper{
    top: calc( 100% - var(--sticky-vertical-distance) - var(--sticky-width)* 9/16 ) !important;
    top: calc( 100% - var(--sticky-vertical-distance) - min( var(--sticky-width), calc(100vw - var(--sticky-horizontal-distance)*2) )* 9/16 ) !important;
    left: var(--sticky-horizontal-distance) !important;
}
selector .sticky-video.activing.active.bottom-right .elementor-wrapper{
    top: calc( 100% - var(--sticky-vertical-distance) - var(--sticky-width) * 9/16 ) !important;
    top: calc( 100% - var(--sticky-vertical-distance) - min( var(--sticky-width), calc(100vw - var(--sticky-horizontal-distance)*2) ) * 9/16 ) !important;
    left: calc( 100% - var(--sticky-horizontal-distance) - var(--sticky-width) ) !important;
    left: calc( 100% - var(--sticky-horizontal-distance) - min( var(--sticky-width), calc(100vw - var(--sticky-horizontal-distance)*2) ) ) !important;
}
selector .sticky-video .close{
    position: absolute;
    top: -13px;
    right: -13px;
    background: #fff;
    border-radius: 50px;
    height: 25px;
    width: 25px;
    display: none;
    opacity: 0;
    cursor: pointer;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 15%);
}
selector .sticky-video .close span{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
selector .sticky-video.active .close{
    display: block;
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

 

CSS code snippet for Sticky Video Effects:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var position = 'top-left',
    closeButton = false,
    disableOnMobile = false

$(document).ready(function(){
    
    var v = $('.sticky-video'),
        disableSticky = false
    
    if(closeButton){
        v.find('.elementor-wrapper').append('<span class="close"><span>&#x2715;</span></span>')
    }
    
    function addSticky(){
        
        if( disableSticky ) return
        
        var w = v.width() + 'px',
            top = v.offset().top - $(window).scrollTop(),
            left = v.offset().left
        
        v.find('.elementor-wrapper').css({
            'width' : w,
            'padding-bottom' : 'calc(' + w + ' * 9/16)',
            'top': top,
            'left': left
        })
        
        v.addClass('activing')
        setTimeout(function(){
            v.addClass('active ' + position)
        },10)
    }
    
    function removeSticky(){
        v.removeClass('active activing ' + position)
        v.find('.elementor-wrapper').css({
            'top': 0,
            'left': 0
        })
    }
    
    function stopVideo(){
        
        if( v.find('iframe').length ){
            
            var player = v.find('iframe'),
                src = player.attr('src').replace('&enablejsapi=1', '')
                
            player.attr('src', '')
            setTimeout(function(){ player.attr('src', src) },1000)    
        }else{
            var video = v.find('video')[0]
            
            video.pause()
            video.currentTime = 0
        }
    }
    
    $(window).on('load scroll resize', function(){
        
        if( disableOnMobile ) { disableSticky = $(window).width() < 768 }
        
        if($(window).scrollTop() > v.offset().top + v.outerHeight()/2){
            addSticky()
        }else{
            removeSticky()
        }
    })
    
    $('body').on('click', '.sticky-video .close', function(){
        removeSticky()
        stopVideo()
        disableSticky = true
    })
})

</script>