JSFiddle - React, Tailwind, and code Playground

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 class="inner">
<iframe id="video" src="https://player.vimeo.com/video/220643186?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<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&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<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&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<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&muted=1" 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

// $f == Froogaloop
var players = []
$('.inner').each(function() {
  players.push({
      player: new Vimeo.Player($(this).find("iframe").get(0)),
      top: $(this).position().top,
      status: "paused"
  })
});
var viewportHeight = $(window).height();

$(window).on('scroll', function() {
    var scrollPos = $(window).scrollTop();
    for(var i=0; i<players.length;i++) {
    	var elementFromTop = players[i].top - scrollPos;
      var status = (elementFromTop > 0 && elementFromTop < players[i].top + viewportHeight) ? "play" : "pause";   
      if(players[i].status != status) {
          players[i].status = status;
          players[i].player[status]();
          console.log(i, status);      
      }
    }
});

// http://stackoverflow.com/questions/26866025/pause-and-play-video-when-in-viewport