Beaver Builder: Stop Videos when they are outside of the visible viewport

frontend.js

// By default, videos continue to run even when not visible. This is using unnecessary CPU ressources.

jQuery.fn.isInViewport = function () {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight();

    var viewportTop = jQuery(window).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};


function maybeStartStopVideo() {
    if (jQuery('.fl-bg-video video, .fl-video video').length == 0)
        return;
    
    jQuery('.fl-bg-video, .fl-video').each(function () {
        var video = jQuery(this).find('video')[0];
        if (!video) return;
        
        if (jQuery(this).isInViewport() && jQuery(this).is(':visible') && /* Tab active? */ !document.hidden) {
            //console.log('start video');
            video.play();
        } else {
            //console.log('stop video');
            video.pause();
        }
    });
}

jQuery(window).on('visibilitychange', maybeStartStopVideo);

jQuery(document).ready(function() {
    // Events would be nicer but I couldn't get to work them reliably
    setInterval(maybeStartStopVideo, 1000);
})