Sync video playback with vertical scrolling

video-scroll-sync.js

const scrollVideo = (media, threshold = 1) => {
  const video = document.querySelector(media);
  const target = video.parentNode;

  const scrollDistance = target.clientHeight - window.innerHeight;

  let observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          window.onscroll = () => {
            const scrollBase = window.scrollY - target.offsetTop;
            const calcY = (video.duration / scrollDistance) * scrollBase;
            video.currentTime = calcY.toFixed(3);
          };
        }
      });
    },
    { threshold: threshold / (target.clientHeight / window.innerHeight) }
  );

  observer.observe(target);
};