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

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.