iPad Safari ignores div onclick above html5 video

Question

I've a problem making div element clickable. I've a HTML5 video on screeen, after video end event I create some div element positioned above video with z-index property. On taping this divs nothing happens, but if this divs are positioned not above video, everything works just fine. Does anybody have workaround for this thing?

Answer 1

If you disable controls on the video element then it won't steal your click events. You'll then have to create custom controls in order to make it play though!

Answer 2

There is no way to work with html elements positioned above HTML5 video on iPad safari, since video is rendered with hardware and displayed above browser. The only workaround I've found is to hide the video when something is displayed above, to make it clickable.

Answer 3

This is the code that will work on both the iPad and iPhone. I tried removing the controls and then add them again, but this worked only on iPad not on iPhone. After remove the opacity and then add it again it worked on iPhone also.

$("#overlay_open").click(function(){
  $("video").prop("controls", false);
  $("video").css("opacity", 0);
});

$("#overlay_close").click(function(){
  $("video").prop("controls", true);
  $("video").css("opacity", 1);
});