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 dropdown submenu overlays the videoplayer container (z-index of dropdown is higher than of videoplayer). In Safari and Chrome the links of the submenu entries work properly on click, but in Mobile Safari on iPad they do not react. To reduce the problem, my minimal example includes a link element that overlays a video element.

<head> 
<style>
a {
    position: absolute;
    display: block;
    z-index: 1;
}
video {
    position: absolute;
    z-index: 0;
}
</style>    
</head> 

<body > 
<a href="http://www.google.de">click me</a>
<video src="" width="640" height="360" preload="none" controls="controls"></video>
</body>

Touching the link element on an iPad does not work. Any advice appreciated how to make the link clickable on iPad!

score 19 · Answer 1 · answered Jun 08 '11 at 13:13

19

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.

answered Jun 08 '11 at 13:13

jiriki

471
1
4
11

8

For iPad this solution works. But removing the controls attribute is not changing the behaviour of the video object on iPhone Safari. It still captures the events. – emrahgunduz Apr 14 '12 at 08:44
I'm using the Video tag in phonegap, I've got no `controls` attribute but I still don't get taps to register. Is there a different workaround? – Pete Jan 15 '14 at 15:32

score 6 · Answer 2 · answered Mar 19 '13 at 17:57

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!

score 2 · Answer 3 · answered Apr 24 '14 at 10:33

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);
});

score 2 · Answer 4 · answered Mar 02 '12 at 14:37

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.

answered Mar 02 '12 at 14:37

Brent

21
1

you can also use visibility: hidden – killebytes Sep 11 '14 at 08:38

score 0 · Answer 5 · answered Aug 29 '14 at 11:50

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();
});

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

5 Answers5

Linked