Player.js: API does not respond when the player is invisible in Chrome (v52.0.2743.116, OS X)

[plindelauf]

Expected Behavior

I expect the player to respond and work as normal even when the video is invisible. In our case, we want to seamlessly start a video for our user at any set point in time. We do not want to show the video iframe already when the video is still being loaded. Therefore we move the video off screen to a left position of -10000px and as soon as the video is sufficiently loaded, we move it into view.

Actual Behavior

The API does not respond at all when the iframe is off screen.

This seems to be an issue specifically in Google Chrome. Tested on version 52.0.2743.116 on OS X. It works fine in Safari and Firefox

Steps to Reproduce

http://codepen.io/plindelauf/pen/ZOdvkb

[jspath]

I have also run into this issue. When invisible, the video never fires its ready event, and the player.js code won't send any commands to the video until the video is ready.

For my purposes, it would be ideal if the video could fire its ready event, even if it is not visible.

Another possible solution would be for the video to accept commands, even if it is not yet ready.

I don't really know how feasible this is ... I think @bdougherty would have to weigh in.

[bdougherty]

I think this is an optimization in Chrome with window.requestAnimationFrame(). Usually this kind of thing is because the <iframe> window has no dimensions (which we require for the player to initialize), but that doesn't seem to be the case here. The ready event is triggered inside an rAF callback, so the rAF not firing would explain it.

It will probably take us a little while to be able to get to this and come up with a fix.

[plindelauf]

It would be great if you could give this issue high priority. Due to this error, Vimeo doesn't work at all in our solution for the majority of our customers (those that are using Chrome) and that's rather painful. Thanks!

[kmgdevelopment]

I'm having a similar issue on Firefox. The iframe is inside a modal window with display: none; applied on initialization. The Vimeo API doesn't fire its ready state until the modal window has been opened for the first time. So trying to automatically play the video when the modal opens fails, as attaching the play event handler to the modal opener element has no effect.

It does work for me on Chrome, however, though I know the OP's case is using an off-screen element rather than an invisible one.

[bdougherty]

@kgrote that is a separate issue. We need a width and height for the player to initialize, so as long as it's set to display: none we won't have a width or height, so we defer initialization. If you're trying to automatically play, using ?autoplay=1 should work for that.

[sebastiansulinski]

Did you guys try rather than setting display:none - moving container outside of the screen with absolute, negative positioning?

[kmgdevelopment]

@sebastiansulinski Moving the video off-screen is what causes @plindelauf 's original problem in Chrome.

[sebastiansulinski]

@kgrote - you're right - sorry, missed that.

[edgework]

On Chrome 53.0.2785.116 the API responds but the video doesn't load until at least a fraction of it is visible. This prevents playing of a video immediately and gives a bad user experience.

[plindelauf]

Any progress on this issue? We advising a lot of our customers to steer away from Vimeo, but that's not what we want...

[edgework]

+1 on the above. This is really becoming unusable for us.

[matuzo]

For us as well.
Is there anything I can do to help?

[macx]

I wanted to upgrade from froggaloop, but couldn't. I have to preload videos, which is not possible, because they are not in the viewport at this time. Please correct this issue as fast as you can.

[CHEWX]

I too have just come across this issue of the video only starting autoplay when a fraction of it is visible in the viewport. Nothing to do with display: none;.

Any update ? Don't really want to go down the Vimeo Pro route and custom HTML5 video element.

[plindelauf]

Please, guys? Any news?

[bewards]

Same thing happens when using KnockoutJs. I have a list of video links as knockoutjs objects that contain the Video Id. Once the user clicks on a link, a modal pops up and knockout handles the selected video and passes it to a new Vimeo.Player.

[justono1]

Yeah issue still persisting today. My implementation, if I remember correctly was working at one time on chrome about a year ago.

I'm using a fixed container that is set to display none with the vimeo iframe inside of it. On click of a link in the page triggers the fixed container (modal) to fadeIn and the player.play() method is called. The videos audio plays just fine and the vimeo API responds as well (pause, stop, etc.) I just can't see the video actually playing.

This implementation works as expected on safari. With the video visible.

[luwes]

In my tests this issue seems to be fixed in Chrome.
https://codepen.io/luwes/pen/RQBRaW