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

Answer 1

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