touch event not working with z-index for overlay div on ipad

Question

I have displaying video using video tag, if user pause the video I am display some option top of video tag using div, all the click event and z-index work properly on all browser in desktop, but some how I didn't find any solution for iPad that the quicktime player and div z-index always getting auto even I have already change the css programmatically but no luck on iPad

$("#video_screen").bind("pause",function(){
        $("#video_screen").css("z-index","-1");
        $("#videoOptionsDiv").show();
        alert("Seek Time:"+$("video").attr("currentTime")+" ms");
        $("#notif").slideDown("fast");
        alert("video "+$("#video_screen").css("z-index"));
        alert("optionaction "+$("#optionActions").css("z-index"));
 });

this is my code and work for desktop browser only

score 0 · Answer 1 · edited May 23 '17 at 11:56

This is a similar SO question where someone determined that mobile safari cuts a hole for the video tag and nothing is allowed to render ontop.

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.

Its a bit old though so you can try setting a 9999 z-index on the div rather than setting a -1 z-index on the video tag, but it might not work.

thanks for the reply. But I getting always auto in z-index value for video, this will not change somehow I have set high z-index for div but not working — Pratik, Jun 02 '12 at 06:40
any way that i can access the quicktime player and at pause time hide that player — Pratik, Jun 02 '12 at 06:46

score 0 · Accepted Answer · answered Jun 04 '12 at 12:07

I found one solution for this, I have just remove the control when the menu was appeared top on video so it was not fired touch event for the video. They set the priority based on the control so if you just remove the control then you can detect the touch event for overlapped element.

And just add again when you hide the option

This it's the hack we are found

hope this answer was help full to anyone

Thank you

touch event not working with z-index for overlay div on ipad

2 Answers2

Linked