Iphone/Ipad - safari, embed video gets page scrolled down on play event

[geoshar]

Description

We have a page with iframes of videojs included in,
On Iphone or Ipad, using Safari browser, when you tap on "play" button, the page gets scrolled down.
For example tested here http://elemb.com/projects/yaplakal/html5player/dist/app/tests/demo.php
And here http://bestof.interactr.io/

Steps to reproduce

1. Open in Iphone/ipad with Safari browser, the link http://bestof.interactr.io/
2. Scroll a bit bottom, tap "play" button

Results

Expected

The page shouldn't be scrolled down.

Actual

The page gets scrolled down on first play event.

Error output

No console errors.

Additional Information

versions

videojs

I guess the version doesn't matter at all, as this issue was tested on 5.13.0 and 5.18.4, same bug on both.

browsers

Safari

OSes

iOS

[gkatsev]

This was fixed in recent versions. It was because we were focusing the play toggle after a click on the big play button. Available in 6.2.5 (#4497) and 5.20.2 (#4523). Hope that helps.

[geoshar]

This was fixed in recent versions. It was because we were focusing the play toggle after a click on the big play button. Available in 6.2.5 (#4497) and 5.20.2 (#4523). Hope that helps.

i was trying new version, the bug is still here, this happens not only when you click on 'big play button', but also just when the 'play' event is triggered. As i researched a lot about,i found that iOS on iPhone and iPad has a specific thing which fixes the position of the player on "center" on the window, when the 'play' event is triggered, the same thing happens in pure html5 player too. to fix this, i found that there on the body,html should be 3 css parameters

-webkit-overflow-scrolling: touch;
overflow:auto;
height:100%;

This fixes the issue, but for the 'height:100%', it breaks down another things on the site.
There should be some another solution for that, as i know that another players for example 'Youtube' player, or any another embed player, doesn't have this issue, i think there's some parameter for the html5 player or a script, which blocks this auto scrolling to the player.
What do you think?

i've created an example with 5.20.4, test it here
http://elemb.com/projects/yaplakal/html5player/dist/app/tests/demo.php
scroll to third player, and tap play, you will see that the page still gets scrolled away from the player..

[geoshar]

@gkatsev same issue link

i've tested pure html5 player in the same way, and tested other players,for example 'vimeo' player and there's no bug like this,i thought it was something by default for that OS, but not, there's some bug exactly in VideoJS. So i tried to fix this myself, i found that by deleting this.trigger('play') then when you play the video, video initiates to play, and there's no scroll jumping anymore, but events you have set, doesn't work anymore.
So, which is the solution?

• fixed. My apologies, it was not VideoJS the problem itself, but some plugins connected in.