Menu
I’d like to place interaction controls above a youtube iframe video, and I got it working quite OK by just adding wmode=opaque as arguments and then position the elements absolute above the iframe.
My problem is that on mobile safari - the controls work fine first, but when I return from the fullscreen video, they are all disabled. It works fine on desktop though.
The HTML is basically:
<iframe src="http://www.youtube.com/embed/[ID]?wmode=opaque"></iframe>
<button id="btn">Click me</button>
And then the button is positioned absolute above the iframe.
For a demo, please visit this fiddle using your mobile safari: http://jsfiddle.net/SwGH5/embedded/result/
You’ll see that the button yields an alert when clicked. Now, play the video and click "done". Then try to click the button again...
If the movie was embedded using the <video> tag I could listen for a fullscreen-end event and do something, but now I’m stuck...
Here’s the fiddle: http://jsfiddle.net/SwGH5
441
Mobile Safari chooses to differ, however. It does not generate click events for elements that do not have either or both of: A directly bound onclick handler. The cursor property set to pointer in CSS.
turnsout that you need use a clickable element like a button or an anchor tag. If it can’t be expected to be clicked then it won’t be seen that way by IOS. An excerpt from apples developer page. How apple handles events Because of the way Safari on iOS creates events to emulate a mouse, some of your elements may not behave as expected on iOS.
Because of the way Safari on iOS creates events to emulate a mouse, some of your elements may not behave as expected on iOS. In particular, some menus that only use mousemove handlers, as in Listing 6-1, need to be changed because iOS doesn’t recognize them as clickable elements.
In particular, some menus that only use mousemove handlers, as in Listing 6-1, need to be changed because iOS doesn’t recognize them as clickable elements. Use a clickable element like a button or an anchor tag if your design permits.
So I played around with the iframe API a bit and found a solution. It's kind of hacky... but not really. When a user clicks on the video to play it, the document.activeElement becomes the iframe. When the user clicks the "done" button, the document.activeElement === document.body. So when the video starts playing, we periodically check to see if the active element returns to the body. At that point, the only solution I found was to redraw the iframe. In the example, I destroy() the video and recreate it using the iframe API. I also tried cloning the iframe and replacing it with success (I left that code there so you could see it):
http://jsfiddle.net/ryanwheale/SwGH5/105/
It's not the best solution, but it works. Also, to give an explanation of what [I think] is happening - iOS hijacks any video content (Safari or Chrome) and plays it using the native video player. Any type of OS functionality like this takes place "over" the browser if you will - higher than any z-index... completely outside the browser. When the user clicks "done" the native player kind of zooms out as if it is re-implanting itself on the page. My best guess is that the native player is still hanging out "over" the browser... thus making anything underneath it inaccessible. The fact that the button appears to be on top is just an anomaly... for lack of better description.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
