JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A reiciendis magnam quisquam, fugit molestias praesentium totam unde quod aut nesciunt doloribus provident pariatur distinctio eius perspiciatis ab deserunt maiores temporibus!</p>
  <p>Modi quod beatae tempora illum ab fuga molestiae earum dolorem! Natus in, iure quos vitae animi est. Nulla debitis dolor harum, molestias veniam eaque voluptas inventore rerum quo dignissimos amet?</p>
  <p>Officiis praesentium quod cum veniam, harum! Tempore, nemo fugit officia quia doloribus dolores ab, fugiat minima amet numquam. Quisquam iure dignissimos, fugit dicta ipsum. Sit debitis nam eveniet esse temporibus!</p>
  <div class="video-wrapper">
    <video controls>
      <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
  </video>
  </div>
  <p>Qui illum a at numquam voluptas beatae ratione, culpa quibusdam doloribus nulla expedita consectetur maxime fugit perferendis excepturi accusamus nobis dignissimos repellat veritatis, vel. Asperiores quis accusantium id cumque voluptatibus.</p>
  <p>Debitis hic mollitia, itaque nam, magni officia nulla. Possimus et, velit rerum beatae perspiciatis officia voluptatem itaque cumque facilis sit. Repellat assumenda temporibus animi omnis incidunt asperiores autem nemo totam!</p>
  <p>Sequi non soluta ut numquam fugiat dolor doloremque omnis recusandae esse maxime? Illo rerum impedit placeat excepturi totam, ullam et eaque ad, nisi reiciendis sunt animi, dicta soluta accusantium in.</p>
  <p>Voluptate ullam nemo pariatur eius odit voluptates earum aspernatur incidunt obcaecati atque totam deleniti unde possimus nulla consequatur mollitia, quis id aperiam. Adipisci repudiandae, provident enim veritatis quibusdam nostrum porro?</p>
  <div class="video-wrapper">
    <video controls>
      <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
 ...

SCSS

html, body {
  margin: 0;
  padding: 0;
}
#body {
  padding: 1rem;
}

JavaScript

window.addEventListener('scroll', function(e) {
	if (window.scrollDebounce) {
  	clearTimeout(window.scrollDebounce);
  }
  window.scrollDebounce = setTimeout(function() {
  	var videos = document.querySelectorAll('#body .video-wrapper');
        
    videos.forEach(function(videoWrapper) {
    	var rect = videoWrapper.getBoundingClientRect(),
      		video = videoWrapper.querySelector('video');
    	if (rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
        	video.play();
        } else {
        	video.pause();
        }
    });
  }, 10);
});