HTML5 Video Causes Page to Jump on Safari 10 - html

Question

When my page loads, after about 5 seconds, the window scrolls to an html video which is a significant ways down the page (which is on autoplay). This has been an issue following the Safari 10 release. Anyone know why this may be the case?

Answer 1

I'm having the same issue - if I remove the autoplay attribute it doesn't happen.
Initiating autoplay via JS (ou even starting the video from the console) makes the page jump as well.

Answer 2

it's the "controls" attribute on the HTML, i've found that the new update on Safari is giving few issues, have a look at this: https://stackoverflow.com/questions/42692679/video-tag-on-safari-10-goes-up-after-few-seconds
i did reproduce your issue (mixing it with mine on that question) on Jsfiddle:
https://jsfiddle.net/antonino_R/d9tf0va3/15/
(scroll down and run again to reproduce the issue, you may need to run and scroll quickly down again)
and removing "controls" does fix the issue https://jsfiddle.net/antonino_R/d9tf0va3/16/
<div class="wrapper">
<div class="wrapper-inner">
<div class="wrapper-video">
<video autoplay loop muted >
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
<div class="site-centered clearfix">
<header class="entry-header">
<h1 class="entry-title">this is a title</h1>
<h2 class="entry-subtitle">this is some text</h2>
</header>
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>this is to scroll down the page and test that it goes up after few seconds</h4>
obviously if the controls are needed this fix isn't good enough

Answer 3

At first, you have to add this piece of code in footer:
<script>
var myVideo = document.getElementsByTagName("video")[0];
myVideo.controls = "";
</script>
This worked for me. Before i had problem that after 5 sec when website loaded, just jumped to section with video background. I had there overlay image and without value min-height: ___px; overlay was shorter than video height.