lazyloadingvideo.html

<-- Put this script AFTER your footer -->
<script>
//Wait for the dom to be loaded
document.addEventListener("DOMContentLoaded", function() {
  //Recover an array of all video elements with the "lazy" class on them.
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
  
  //Check if the browser supports intersection observer
  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              // The original markup had the src empty and a data-src with the url of the video.
              // We fill the empty src attribute with the datasrc one.
              videoSource.src = videoSource.dataset.src;
            }
          }
          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });
    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});
</script>