JSFiddle - React, Tailwind, and code Playground

by James Peng

HTML

<p>scroll down plz</p>
<video class="video" width="600" height="400" controls>
  <source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/NYC-Traffic.mp4" type="video/mp4">
</video>

CSS

.video {
  margin: 101vh 0;
}

JavaScript

var $video_elements = $('.video');
var $window = $(window);

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($video_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);
    
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.get(0).play();
    } else {
      $element.get(0).pause();
    }
    
  });
}