JSFiddle - React, Tailwind, and code Playground

HTML

<section class="video_container sections">
	<video preload="none" autoplay loop muted="true"class="video_window videos">
	  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
	  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
	  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
	  
		Your browser does not support the video tag.
	</video>
	<div class="video_caption"> 
		<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
	</div>
</section>

CSS

.video_container{
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.video_captiont{
  position:absolute;
  margin:5px;
  z-index:100;
  font-size:21px;
  padding:3%;
  
}

JavaScript

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