iPhone youtube video z-index

Question

I have an embedded youtube video in a page. I also have a menu (when opened) is on top of that video.

I have set the z-index value of the menu to higher than that of the video. I have also set the wmode of the video to transparent to allow for content on top of it.

I am experiencing no issues at all in safari, ie, chrome, or firefox on my computer (the menu is on top of the video, as it should be), but on the iPhone and iPad - the flash content gets replaced with a big clickable youtube button that opens the youtube embed inside the youtube app, and that big button is above the menu. Does anybody know how to solve that issue?

Thank you!

Answer 1

I am not sure if this is what you need. A live example on jsbin.com would help. Anyway I hope the following be useful. You can use the iframe method that youtube provides to play its videos. If the browser supports html5 will show the video with it, otherwise with flash. Also it plays perfect with iphone/ipad without open the app of iphone/ipad.

You can use the following code as an example <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/bIPcobKMB94" frameborder="0">

in the above example the video id is bIPcobKMB94. You can change this id and show your video.

You can access with your iphone a live example of it here

More infromation for youtube iframe

YouTube HTML5 Video Player

Answer 2

The ipad and Iphone unfortunatly don't display flash content. It uses the h.264 version of the videos.

Therefore its an entirely different plugin that actually plays the content and setting the Wmode of the flash file won't make any difference.

EDIT I've looked and I've no solution for the ipad/sefari/iphone problem.

Answer 3

I suspect that the application used to switch out the content is setting a z-index level inline. I would find the id of that element (the button or it's container) and set the z-index to lower than you menu z-index. Be sure to include '!important' after the value to ensure it overwrites the inline style.