Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

z-index layering for HTML5 video (ipad) [duplicate]

Possible Duplicate:
iPad Safari mobile seems to ignore z-indexing position for html5 video elements

I am using the BrightCove smartplayer code to write an HTML5 video tag into the page. This code replaces the object tag with video tag so that it works on the iphone and ipad, whils still working in browser that dont support

The problem I am having is with the layering of this dynaically written in tag. It does not seem to obey the z-index order, resulting in the dropdowns I have placed above the video sitting behind the video when someone rolls over the dropdown.

like image 648
Clawg Avatar asked Aug 30 '10 13:08

Clawg


1 Answers

After some digging, I found the solution to my problem, which was a very similar one.
When dynamically inserting a video tag (maybe with others as well) into the dom, the z-index property is messed up.
As you can see here, the solution is quite simple : you have to add the css3 property -webkit-transform-style: preserve-3d.
It's not documented as a bug, but this is the only workaround that I could find.
Hope this helps.

like image 186
gion_13 Avatar answered Nov 15 '22 19:11

gion_13