1

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?

Tom Moore
  • 11
  • 2
  • This is not clear at all. Is this page an implementation of yours or are you reporting a possible Safari bug? – lucasnadalutti Sep 29 '16 at 20:54
  • This is a page on a site I developed pre-safari 10. It may be a possible bug or a new feature on safari that scrolls to videos. That's what I'm looking to figure out. – Tom Moore Sep 29 '16 at 20:56
  • Could you provide the link and a relevant part of the code? – lucasnadalutti Sep 29 '16 at 20:56
  • This site is an example of the video page jump. If the video is out of view, it will scroll the page to the video on play. http://camendesign.com/code/video_for_everybody/test.html – Tom Moore Oct 12 '16 at 18:12
  • @TomMoore I am experiencing the same issue in Safari 10. Also, I am unable to reproduce the issue on the page you linked. Did you find a solution? – worsnupd Nov 28 '16 at 23:34
  • Is there any news? – Monte Feb 17 '17 at 11:33

3 Answers3

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.

Dinis Correia
  • 36
  • 1
  • 4
1

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

Community
  • 1
  • 1
AntoninoR
  • 71
  • 1
  • 8
0

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.

reaviel amarov
  • 1