Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone youtube video z-index

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!

like image 597
Yuval Karmi Avatar asked Dec 16 '22 22:12

Yuval Karmi


2 Answers

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

like image 100
Sotiris Avatar answered Jan 10 '23 15:01

Sotiris


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.

like image 26
Wes Avatar answered Jan 10 '23 13:01

Wes