Play video when in viewport

Autoplay videos when they enter viewport, and hide them when the exit viewport.

by Jon Fuller

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<div id="wrapper">

<video src="https://player.vimeo.com/external/470285833.sd.mp4?s=43f1efbe9d9720e7ea31f0ddb29d6d1d4c39fa1f&profile_id=165" width="100%" loop="loop" muted="" playsinline=""></video>
<video src="https://player.vimeo.com/external/470285261.sd.mp4?s=2781e8860f25fb75801270f78263a07dc4e3b4ab&profile_id=165" width="100%" loop="loop" muted="" playsinline=""></video>
<video src="https://player.vimeo.com/external/470285284.sd.mp4?s=8447fd1c178bc58a69bc2914afca7e49453e85df&profile_id=165" width="100%" loop="loop" muted="" playsinline=""></video>
<video src="https://player.vimeo.com/external/470285664.sd.mp4?s=7707624ca51226c4756349466d2388b6e3d176c5&profile_id=165" width="100%" loop="loop" muted="" playsinline=""></video>
<video src="https://player.vimeo.com/external/470285867.sd.mp4?s=6437130e7db39d5f6a9077212f79577878b1ac40&profile_id=165" width="100%" loop="loop" muted="" playsinline=""></video>
<video src="https://player.vimeo.com/external/470285559.sd.mp4?s=587e49eab1d1feb0315a86a18fccc6dc6c16a1be&profile_id=165" width="100%" loop="loop" muted="" playsinline=""></video>

</div>

CSS

body {
  height:5000px;
}

#wrapper {
	padding: 5%;
}

video {
	max-width: 600px;
	margin: 0 auto;
}

JavaScript

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

function checkScroll() {
    var fraction = 0.1; // Play when 10% 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);

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

    }

}

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