title: Video playback tethered to scroll choppy only with 1920x1080 videos
body: <p>I have a video that I want to play based on the user's scroll position (as the user scrolls, the video plays; when the scroll stops the video pauses).</p>
  
  <p>This works fine with most mp4 videos, however when I try to us a video that has a 1920x1080 resolution the playback is "choppy", only updating the video image once the user is done scrolling (mouseup) and not during the scroll (mousedown).</p>
  
  <p>Here is an example in <a href="https://jsfiddle.net/h3beyxot/" rel="nofollow noreferrer">jsfiddle</a>. The default video in the example has a resolution of 1920x1080. The commented video link is 1280x720 and works fine. This happens with every 1080 video tested. 1920 width is preferred because the video in the finished product should be full-screen-width and should cover most desktop screens without losing much resolution quality.</p>
  
  <p>Here is the code:</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="main-wrapper"&gt;
    &lt;video id="main-video" width="auto" height="240" controls preload&gt;
      &lt;source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4"&gt;
      &lt;!--
    &lt;source src="http://mirrors.standaloneinstaller.com/video-sample/star_trails.mp4" type="video/mp4"&gt;
    --&gt;
    Your browser does not support the video tag.
    &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code> var myContent = $('#main-video');
   var myContentConainter =$('#main-wrapper');
   var vid = document.getElementById("main-video");
   var originalTop = 0;
   var scrollPos=0;
   var atTopState = false;
  
  
   var vid = document.getElementById("main-video");
   var videoToHeightRatio= .012;
   var videoLength;
  
  vid.onloadedmetadata = function() {
        videoLength =vid.duration;
   };
  
   vid.pause();
  
  
  document.addEventListener("scroll", function(){
  
      ////// Set up variables ////////
  
  
      var windowTop = $(window).scrollTop();
      var windowBottom = $(window).scrollTop() + $(window).height();
      var windowMidPoint = ($(window).scrollTop()) +( $(window).height() / 2 );
  
  
      var contentTop = $(myContent).offset().top;
  
      var contentBottom = contentTop + $(myContent).height();
  
      var contentMidpoint = contentTop + ($(myContent).height()/2);
  
  
  
      var windowHeight = window.innerHeight;
      var windowWidth = window.innerWidth;
  
      //Video stuff
  
  
  
      var currentSec = vid.currentTime;
  
  
      var videoContainerOverlow = videoLength/videoToHeightRatio;
  
     var containerHeight = $(window).height();
  
     var newContainerHeight = containerHeight + videoContainerOverlow
     myContentConainter.css('height',newContainerHeight+"px");
  
  
  
      if (windowTop &gt;= contentTop){
          if (atTopState==false){
            originalTop = contentTop;
            myContent.css("position","fixed")
            myContent.css("top","0")
           }
  
        vid.currentTime = (windowTop / videoContainerOverlow) * videoLength;
  
       atTopState = true;
  
      }
  
      if(  windowTop &lt; originalTop){
         myContent.css("position","unset")
        myContent.css("top","unset")
        atTopState=false;
      }
  
       if (windowBottom &lt;= contentTop){
        myContent.css("position","unset")
        myContent.css("top","unset")
        atTopState=false;
      }
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main-wrapper{
    background-image:linear-gradient(blue,red);
    height:300vh;
  }
  #main-video{
  
  }
  </code></pre>