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

Question

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.

Answer 1

I ran into this also. The only thing that I could get to work for me was to add

display:none

to the video tag when showing a div over it that needed to be clicked on.

Answer 2

Not sure if it applies to HTML5 video, but there's a similar issue with Flash video that can be solved by changing the "wmode" attribute.

Answer 3

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.