Play an ambient video (muted inlin

ambient-video-play-on-enter.js

var ambientVideo = document.getElementById("ambientVideo");

/**

// in HTML page

<video muted playsinline id='abientVideo'>
  <source src="my-video-file.webm" type="video/webm">
</video>

**/

var io = new IntersectionObserver(
  entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        ambientVideo.play();
      } else {
        ambientVideo.pause();
      }
    });
  },
  {
    // options: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options
    root: null,
    rootMargin: "0px",
    threshold: 0.5
  }
);

// after confirming the element exists, look for the #ambientVideo when visible in viewport
if (ambientVideo) {
  io.observe(ambientVideo)
}