JSFiddle - React, Tailwind, and code Playground

by Djsquid

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js"></script>
<div class="inner">
<iframe id="video" src="https://player.vimeo.com/video/220643186?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS

body {
  height:5000px;
}

JavaScript

// Froogaloop
// https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js
// https://github.com/vimeo/player-api/blob/master/javascript/froogaloop.js
// http://a.vimeocdn.com/js/froogaloop2.min.js

var iframe = document.getElementById('video');

// $f == Froogaloop
var player = $f(iframe);

var inner = $(".inner");
var elementPosTop = inner.position().top;
var viewportHeight = $(window).height();
$(window).on('scroll', function () {
    var scrollPos = $(window).scrollTop();
    var elementFromTop = elementPosTop - scrollPos;

    if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
        inner.addClass("active");
        player.api("play");
    } else {
        inner.removeClass("active");
        player.api("pause");
    }
});
// http://stackoverflow.com/questions/26866025/pause-and-play-video-when-in-viewport