<h1>Lazy load video (scroll down)</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae earum veniam quasi et error in ducimus ea dolorem quo nulla quia sunt eveniet modi, officiis aperiam soluta eius fuga omnis!</p>
<p>Culpa explicabo natus iste voluptatum, quasi repellendus assumenda voluptatem quis distinctio deleniti doloribus. Natus minus excepturi sunt nihil, dignissimos, unde veniam eligendi, dolorem ducimus quisquam nobis error sapiente voluptatibus ex?</p>
<p>Corporis deserunt, nulla id amet perferendis temporibus mollitia fugit quod facere? Consectetur iste voluptates quibusdam possimus, illum sapiente numquam? Minima, quisquam? Totam voluptatum necessitatibus odio consectetur provident. Vel, consequuntur dolores.</p>
<p>Ad pariatur at ut nobis illo mollitia tempora labore sapiente expedita placeat commodi, reprehenderit omnis atque consectetur nesciunt adipisci qui reiciendis voluptatum earum voluptates optio eum? Quos dolorum consequatur voluptatibus!</p>
<p>Dolorum eos ipsam illo modi, sequi nihil fugit aspernatur, reprehenderit obcaecati, dolores quod fugiat similique consectetur ad doloribus voluptatum! Perferendis distinctio quae dolor totam quasi labore magni eum voluptate saepe.</p>
<p>Eum omnis necessitatibus culpa architecto eaque. Deserunt enim quae minima modi doloremque illo quis, expedita voluptates vero iure assumenda at culpa ducimus, quidem in iste a minus ipsum, sit harum.</p>
<p>Ullam laboriosam, sed assumenda, ipsa error, animi dicta rerum tempora at praesentium deleniti unde officia quidem aspernatur placeat. Suscipit distinctio ullam, sint ducimus explicabo numquam nemo libero tenetur provident quam?</p>
<p>Accusantium aspernatur a corporis tempore optio! Blanditiis tempore a maiores numquam culpa aliquam aperiam corrupti odit odio eaque. Laboriosam praesentium cupiditate maiores in officia explicabo at sit molestiae aliquam odit.</p>
<p>Vero laboriosam ut, temporibus veritatis error aliquam. Blanditiis, commodi reiciendis cumque repudiandae totam nulla aspernatur ducimus sequi ullam possimus vitae corrupti consectetur provident placeat vel, impedit molestiae porro dignissimos tempora!</p>
<p>Dolores, delectus omnis rem laudantium sequi eum doloribus ut officiis vitae esse culpa repellat voluptates, earum deserunt repudiandae at consequuntur quasi quibusdam aspernatur tempore fugiat perspiciatis, saepe facilis nihil! Sed!</p>
<video class="lazy" autoplay muted loop playsinline>
  <source data-src="https://www.roboleary.net/assets/img/blog/2023-05-16-vscode-what-profile-i-am-using/demo.mp4" type="video/mp4">
</video>

document.addEventListener("DOMContentLoaded", () => {
  let lazyVideos = document.querySelectorAll("video.lazy");

  if ("IntersectionObserver" in window) {
    let lazyVideoObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach((video) => {
        if (video.isIntersecting) {
          updateSources(video.target);

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach((lazyVideo) => {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

function updateSources(video) {
  for (let source in video.children) {
    let videoSource = video.children[source];
    if (
      typeof videoSource.tagName === "string" &&
      videoSource.tagName === "SOURCE"
    ) {
      videoSource.src = videoSource.dataset.src;
    }
  }
}