<!-- some warnings, for demo purposes -->
<strong id="warning" hidden>IntersectionObserver is not supported by your browser, so you can't see the effect. Check its browser support <a href="https://caniuse.com/#feat=intersectionobserver" target="_blank">here</a>.</strong>
<noscript>⚠️ JAVASCRIPT IS DISABLED IN YOUR BROWSER!</noscript>

<h1>When the video is not fully visible on page, it pauses</h1>
<p>Click the video if it is not playing to trigger the behavior</p>

<video muted controls>
  
  <source src="https://ucarecdn.com/33fa1b5d-a164-4178-908c-5a51f872fcef/video.webm" type="video/webm">
  <source src="https://ucarecdn.com/1b63a65c-7796-4b23-a6fc-bb751f1221ed/video.ogg" type="video/ogg">
  <source src="https://ucarecdn.com/ec3f39c9-be9f-4231-a4db-d7fcbd209e71/video.mp4" type="video/mp4">
  Please <a href="https://ucarecdn.com/ec3f39c9-be9f-4231-a4db-d7fcbd209e71/video.mp4" download>download</a> the video.
</video>

<h1 class='bottom'>
  OK, you can scroll back up now and the video should continue playing.
</h1>

html {
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #000000;
  color: #FFF;
}

body {
  text-align: center;
  height: 200%;
}

video {
  max-width: 560px;
}

.bottom {
  position: relative;
  top: 30%;
}

if (!!window.IntersectionObserver) {
  let video = document.querySelector("video");

  let observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio != 1 && !video.paused) {
          video.pause();
        } else {
          video.play();
        }
      });
    },
    { threshold: 1 }
  );
  observer.observe(video);
} else {
  document.querySelector("#warning").style.display = "block";
}