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

Question

I got a video element on a page that\'s working fine both in safari mobile and desktop. I have a seme-transparent pull-down menu that\'s working fine. The problem is, when t

Answer 1

-webkit-transform-style:preserve-3d and -webkit-transform:translateZ(0) didn't work for me.

Using Flowplayer with the ipad plugin and the controlbar plugin allowed me to remove the ipad created control bar and replace it with something that can be z-indexed below my modal windows.

Answer 2

Unfortunately not.

Based on my experience and understanding of how iOS currently works, this isn't possible.

Mobile Safari on the iPad cuts a hole for a Quicktime window , which plays back the video using the built in hardware acceleration to improve battery life. (The iPhone and iPod Touch just open it up in a separate window to achieve the same effect.)

This window doesn't play nicely with the other HTML on the page. In fact, I haven't found a way to get mobile Safari to display anything on top of a tag. My guess is that this is because the hardware acceleration only allows for video scaling and positioning, and that it's only able to handle one video at a time.

Answer 3

I had this problem which was occurring on mobile devices with an off canvas menu. When the menu was over the video you could not tap any of the menu items.

I fixed it my moving the video somewhere else when the menu was on by positioning it absolutely at -100000px when the menu was not displayed it set it back being positioned relatively.

I found using display none did not work as when you set it to block again the video would not work.

I also tried setting the height to 0 - this did not work as the video still seemed to take up the space even though you couldn't see it.

The final method seems a bit extreme but it is not really noticeable when it is being used.

Answer 4

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 5

For anyone running into issues with this still, another fix that ended up working for me was to change the options in the embed code to not allow controls, suggested videos, and video title and player options. I added a simple Modernizr.MQ query to change the src for tablet and mobile, and included the following to the iframe src for mobile:

?rel=0&controls=0&showinfo=0

I never completely tracked down why this works, but my guess is that the controls have some user-agent style that gives them a high z-index and makes the element sit on top of everything.