JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vjs.zencdn.net/4.7/video.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.7/video-js.css">
Scroll down to play video
<div>

<video id="video1" class="video-js" preload="auto" loop="loop" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  bgvideo
</video>
    </div>
<div>    
<video id="video2" class="video-js" preload="auto" loop="loop" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  bgvideo
    </video></div>

<div>    
<video id="video3" preload="auto"  loop="loop">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  bgvideo
    </video></div>
    
<div>
<video id="video4" preload="auto"  loop="loop">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  bgvideo
</video>

</div>

CSS

div {padding-top:700px; width:320px;}

/*video {
   
    padding-bottom:100px;
   
}*/

JavaScript

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

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

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

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