The video has a high keyframe interval (set at 1) so seeking isn't a problem. It scrolls smoothly on my localhost, however it's lagging in production. Here's a demo. Any help would be greatly appreciated as I've been stuck on this for a while.

My goal is to make the video to scroll smoothly and without lag. I'm using a fetch request so that I can download the whole video first to help with the smoothness however it didn't seem to work. Here's my code:

$(document).ready(function () {

  var vid = $('#v0');
  var url = "videos/video.mp4";
  var intro = $("#intro");
  var spinner = $(".spinner-border").closest("div");
  var checkOnce = false;
  var videoLength = $('.heading').length * 2;

  vid.hide();
  spinner.hide();

  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "arraybuffer";

  xhr.onload = function (oEvent) {
    var blob = new Blob([oEvent.target.response], { type: "video/mp4" });
    vid.src = URL.createObjectURL(blob);

    vid[0].play();

    // required to remove the fixed height
    intro.css('marginBottom', vid.height());

    // refresh video frames on interval for smoother playback
    setInterval(function () {
      vid[0].pause();
      vid[0].currentTime = (window.pageYOffset / (intro.height() / videoLength));

      // change video position to fixed or relative when scrolling past container
      if ($(window).scrollTop() >= intro.offset().top + intro.outerHeight() - window.innerHeight + vid.height()) {
        if (checkOnce == false) {
          vid.css('position', 'relative');
          intro.css('marginBottom', 0);
          checkOnce = true;
        }
      } else {
        if (checkOnce == true) {
          intro.css('marginBottom', vid.height());
          vid.css('position', 'fixed');
          checkOnce = false;
        }
      }
    }, 40);
  };

  xhr.onprogress = function (oEvent) {
    if (oEvent.lengthComputable) {
      var progress = oEvent.loaded / oEvent.total;
      if (progress < 1) {
        spinner.show();
        vid.fadeOut();
      } else {
        spinner.hide();
        vid.fadeIn();
      }
    }
  }

  xhr.send();
});