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

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