title: How can I stop responsive background video 'cover' jumping on every page load? (WebKit)
body: <p>I've spent days now trying to fix/work around this infuriating bug which appears to be WebKit/Safari focused (desktop and mobile) and would really appreciate some help figuring out a workaround.</p>
  <p>The issue is that no matter what I do, the background video 'jumps' every time the page loads before snapping into place and playing properly.</p>
  <p><strong>Body code</strong></p>
  <pre><code>&lt;div class=&quot;head home-head section&quot;&gt;
      
      &lt;video id=&quot;background-video&quot; autoplay preload loop muted playsinline poster=&quot;images/poster.jpg&quot;&gt;
      &lt;source src=&quot;images/hero.mp4&quot; type=&quot;video/mp4&quot;&gt;
      &lt;/video&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p><strong>SCSS</strong></p>
  <pre><code>.head {
  width: 100%;
  height: 80%;
  height: 80vh;
  min-height: 650px;
  text-align: center;
  background: #000;
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
          
      #background-video {
      width: 100%;
      width: 100vw;
      min-height: 650px;
      height: 80%;
      height: 80vh;
      object-fit: cover;
      left: 0;
      top: 0;
      pointer-events: none;
      z-index: 2;
      opacity: 0.6;
      }
  </code></pre>
  <p>I think it may be related to using object-fit: cover but I'm not sure. I've tried using object-fit: fill but it still jumps around, just in a different way and then when it has loaded, the video is squashed depending on viewport width.</p>
  <p>I have uploaded the problematic code to this page here: <a href="http://royalwells.agency/stackoverflow" rel="nofollow noreferrer">http://royalwells.agency/stackoverflow</a>. Remember this only seems to happen in WebKit so Safari for Mac, or any browser on iOS.</p>
  <p>I have even tried overlaying a &quot;loading&quot; div on top of the video and hiding it after a few seconds, but - get this - even if I have this loading div appear for 15 seconds, when it fades out the video STILL jumps for a second before playing.</p>
  <p>I spent hours searching the internet for solutions but have found nothing so far and really need to figure out a workaround.</p>
  <p>Would be so, so grateful for help on this.</p>