Mobile Safari: link () element over video element does not work on click

Question

my current project is a html website that contains a dropdown menu (javascript/jquery) and a html5 videoplayer (video-tag only).

When clicking on a menu entry, the d

Answer 1

explanation: the html5 video player absorbs the touch events if controls are enabled.

background: the menu overlayed the video container when dropped down, but the menu item links were not clickable.

solution: as a workaround i temporarily disable the controls by removing the html video attribute "controls" with javascript when the menu is dropped down, and re-add the "controls" attribute when the menu is dropped up again.

Answer 2

Changing the attribute doesn't always work. I've found changing the video's opacity to 0 works, if you can get away with it.

Answer 3

Hello I am trying to resolve this with a YouTube Video Embed that is using the iframe method to apply this fix.

However I cannot change the controls property on the native HTML5 Video element as it is in an iFrame on YouTube.

I even tried targeting the video element in the iFrame, but this is not allowed I found out due to 'same domain' policy preventing me to manipulate the contents of the video in the iFrame.

$(document).on('click', 'span.close', function(){
var button  = $(this);
var video   = button.parent('.videowrap');

var iframe      = video.find("iframe");
var iframeVideo = iframe.contents().find("video");

console.log('iframe', iframe);
console.log('iframeVideo', iframeVideo);
console.log('iframeVideo prop controls', iframeVideo.prop("controls"));

//http://stackoverflow.com/questions/5261079/mobile-safari-link-a-element-over-video-element-does-not-work-on-click
if (iframeVideo.prop("controls")) {
    iframeVideo.prop("controls", false);
    iframeVideo.css("opacity", 0);
}


video.remove();
});

Answer 4

I tried just removing the controls and then add them again, but works only on iPad, on iPhone was the same thing. This is the code that worked

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

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

Answer 5

Your explanation & solution are correct. For someone interested in some code to disable the controls on the menu dropdown:

$('#menu-dropdown').click(function() {
  if ($("video:visible")) {
    if ($("video").prop("controls")) {
      $("video").prop("controls", false);  
    } else {
      $("video").prop("controls", true)
    }  
  }
})

Hope this helps!