background player on ipad safari - iphone

Question

I'm using the mediaelement.js jQuery plugin HTML5 player. The player is used in the background of the page so that all menus are above the player. This works perfectly on Firefox, Chrome, OSX Safari and Opera. On iPad Safari, the menus still appear above the video in a z-indez position layered div, but I can't actually click on the menus.
Any idea or suggestion?

Answer 1

I'm having the same problem as lonchbox.
On mobile devices I have a anchor with position:fixed on the bottom right corner, that opens up a div on the click event. On any area of the website the click event works normally, but if I try to click on it while above the player, the click doesn't work.
The pointer-events:none solution is not the case since the player is not capturing the wrong intent of the click, and the click event of the player is working correctly.
I'm guessing it's a z-index problem - on a quick debug via the safari web inspector, deleting the player div makes everything alright. But changing the position to absolute and setting up a high z-index (on both the anchor and the player div, also on the player div's parents) didn't made a difference.

Answer 2

So the menu you want to click on, that shows above the media element doesn't work? There is a CSS property that you can set on the element you don't want receiving clicks, its called pointer-events.
So for your player you could have a rule like this:
.thePlayer {
ponter-events:none;
}
when that rule is set, it can no longer receive click events. You probably don't want the rule to apply all the time, so use some javascript to set it only when the dropdown is activated.