vimeo HTML5 player vs. mobile safari
just before the launch we faced a problem while embedding Vimeo’s HTML5 player. we did not find any fast solution so used YouTube’s player instead to make it work on the iPad devices as well.
later on, we did some research, came up with a workaround and sent the Vimeo support the following message:
on the iPad, Vimeo embed does not work properly when used in a hidden layer. we’ve put together a little demo with basic CSS & JS to show this, and we also found a workaround which seems to solve the problem.
the thing is that we need to load the player into an empty iframe, but
only after displaying the hidden layer. otherwise it won’t show up at
all, although taping the empty place of the player starts the video.
(fun fact: when putting the two demos into one HTML page, things got
messed up after switching between the original version and the fixed
version and the workaround stops working.)
the workaround solves the problem for us, though you might want to look
into this. I’m not 100% sure if this bug is related to Vimeo or the
iPad’s Safari, or maybe both, however the YouTube player, for example,
worked fine even without this workaround. but we prefer Vimeo on our
site, that’s why we insisted on using Vimeo anyway.
what do you think?
as we thought, they came back with the answer very soon.
First off, thank you for being so thorough in your investigations!
Looks like this happens because of bugs on both sides. It is initializing the iframe, but the values for screen width and height are 0 (which is a bug in Mobile Safari, as this value is correct on the desktop version). That causes our player to initialize incorrectly.
That being said, the workaround you discovered is probably a best practice anyway. iframes are expensive, and it’s probably best to not initialize one unless it actually needs to be displayed. (Plus, you get the fade in!). We’ll make a note of this somewhere on the Player documentation page and probably in the FAQ as well.
Sincerely,
Vimeo
We didn’t lived for nothing!
And now, something completely different.
