JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video id="video23" controls>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<div id="info"></div>

<div id="down">
  scroll down please...
</div>

<div id="right">
  scroll right please...
</div>

<video id="video1" controls>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<video id="video2" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
  Your browser does not support the video tag.
</video>

CSS

#right {
  position: absolute;
  top: 2000px;
}
#video1 {
  position: absolute;
  left: 2000px;
  top: 2000px;
}
#video2 {
  position: absolute;
  left: 1000px;
  top: 3000px;
}

body {
  width: 4000px;
  height: 4000px;
}

JavaScript

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})