CODEWITHSUNDEEP
iphoneipadmobile-safariz-indexmediaelement.js
lonchbox
lonchbox

Reputation: 33

background player on ipad safari

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?

Upvotes: 0

Views: 396

Answers (2)

Fernanda Parisi
Fernanda Parisi

Reputation: 120

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.

Upvotes: 3

Jonathan Miller
Jonathan Miller

Reputation: 1786

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.

Upvotes: 0

Related Questions