Video pause/play while view in the view port

by Sreeraj Saseendran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div style="height:800px;">
sdfsfsd
</div>
<video loop muted playsinline id="video_background"> 
<source src="https://s7d9.scene7.com/is/content/NewellRubbermaid/PARKER%20DUOFOLD%206_%20FINAL%20MASTER" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 

<div style="height:800px;">
sdfsfsd
</div>

JavaScript

var videos = document.getElementsByTagName("video");

function checkScroll() {
    var fraction = 0.08; // Play when 80% of the player is visible.

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
            b = y + h, //bottom
            visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);
console.log("visible == "+visible+" == fraction==="+fraction)
            if (visible > fraction) {
            console.log("visible == "+visible+" == fraction==="+fraction)
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);