Z-index for youtube youtube video

Question

I have an embedded youtube video on the page. I also have a menu (when it's open) located on top of this video.

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

I don’t have any problems on safari, that is, on Chrome or firefox on my computer (the menu above the video, as it should be), but on the iPhone and iPad - the flash content is replaced using the clicktube button with a large mouse click, which will open the tab youtube inside the youtube app, and this big button is located above the menu. Does anyone know how to solve this problem?

Thanks!

Answer 1

I'm not sure if this is what you need. An example is the live example on jsbin.com. In any case, I hope the following will be helpful. You can use the iframe method that youtube provides to play your videos. If the browser supports html5, it will display a video with it, otherwise with a flash. It also works great with iphone / ipad without opening the iphone / ipad app.

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 identifier is bIPcobKMB94. You can change this identifier and show your video.

You can access your iphone as a live example here.

Additional Info for youtube iframe

YouTube HTML5 Video Player

Answer 2

ipad and iphone unfortunately do not display flash content. It uses the h.264 video version.

Therefore, its completely different plugin, which actually plays content and installs a Wmode flash file, will not make any difference.

EDIT I looked and I have no solution to the ipad / sefari / iphone problem.

Answer 3

I ran into this problem. After adding the "wmode=transparent" parameter to the code

<iframe width="480" height="360" src="http://www.youtube.com/embed/111111?wmode=transparent" frameborder="0" allowfullscreen></iframe> ,

the problem is fixed.

Answer 4

I suspect that the application used to disable content sets the z-index inline level. I would find the identifier of this element (button or container) and set the z index lower than your z-index menu. Be sure to include “! Important” after the value to make sure it overwrites the inline style.