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.
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.
Body code
<div class="head home-head section">
<video id="background-video" autoplay preload loop muted playsinline poster="images/poster.jpg">
<source src="images/hero.mp4" type="video/mp4">
</video>
</div>
SCSS
.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;
}
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.
I have uploaded the problematic code to this page here: http://royalwells.agency/stackoverflow. Remember this only seems to happen in WebKit so Safari for Mac, or any browser on iOS.
I have even tried overlaying a "loading" 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.
I spent hours searching the internet for solutions but have found nothing so far and really need to figure out a workaround.
Would be so, so grateful for help on this.