Overlay image over a you-tube video is not clickable on I-pod/ I-phone devices

Question

We are working on youtube iframe APIs where we have one overlay image on the video. By clicking on this image user can skip the entire video. However, image is not clickable on I-pad/I-phone devices when video is running.

I have built a small demo for this :

http://jsfiddle.net/nKqAQ/2/

Try to run above code on I-pad.

Initially image is clickable, however, when video is started, image won't get click. Instead video gets zoom in/out.

Is there any way to trigger click event for the image which is positioned over a running video on iPhone/iPad?

Try taking a look at these Answers: [here](http://stackoverflow.com/questions/3600732/z-index-layering-for-html5-video-ipad), [here](http://stackoverflow.com/questions/6872522/overlay-over-dynamically-inserted-video-tag-in-ipad) and most notably [here](http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements). Hopefully one of these approaches will work for you. — Aurelio, Oct 25 '13 at 00:38
Thanks Nobita for your reply. Given workarounds are more related with HTML5 video player rather than youtube iframe APIs. It may worked for any HTML5 video example, but it didn't work for Youtube video. — aks, Nov 07 '13 at 12:40

score 0 · Answer 1 · answered Oct 23 '13 at 15:18

0

In iOS7 on Iphone/Ipad youtube videos are played using the OS embedded video player, most of times it would override the default html5 player, and all the customizations. That is why you can't see annotations, and advertising on mobile.

answered Oct 23 '13 at 15:18

Carlos487

1,459
13
17

Thanks for the reply. Is there any way to make the overlay iamge clickable then ? I guess, on IOS devices, click on running video (which triggers zoom in/out event) overrides all the other events. So, if we find any way to prevent that then it could work. – aks Oct 24 '13 at 04:54
I don't know because even youtube player now is override by iOS player, but you could look for a **custom HTML5 video player** – Carlos487 Oct 24 '13 at 13:20
Currently, I am using youtube Iframe API and according to the following link : https://developers.google.com/youtube/iframe_api_reference Youtube Iframe API serves an HTML5 player rather than a Flash player for mobile devices that do not support Flash. – aks Nov 07 '13 at 12:36

score 0 · Answer 2 · edited Jul 22 '14 at 13:02

I've come up with a way to achieve one click play ( I'm not using the iFrame API however). It is not the prettiest solution, but seems to work.

Basically, I've got my 'pretty image' underneath the YouTube video iFrame, and set the opacity of the video to zero on document ready. I then have code that determines when the mouse is over the iFrame, and code added to the window.blur event ( occurs when user clicks in the iFrame ).

If the user clicks on the iFrame ( containing YouTube video ), I then change the opacity of the video to 1.

HTML:

<div class="pretty-graphic" style="opacity: 0;">
    <iframe class="video" id="youTubeVideo" style="position: absolute; top: 0; left: 0; height: 450px; display: block;" src="some url" allowfullscreen="" frameborder="0"></iframe>
</div>

Note: I have CSS which contains the background image stuff for a 450px high image in the parent dive.

JavaScript:

$(document).ready(function () {

    $("#youTubeVideo").css('opacity', 0);
    $("#youTubeVideo").height($(".pretty-graphic").height());
    $("#youTubeVideo").width($(".pretty-graphic").width());

    var overiFrame = -1;
    $('iframe').hover(function () {
        overiFrame = 1;
     }, function () {
        overiFrame = -1
     });

     $(window).blur( function() {
         if ( overiFrame != -1 ) {
             $("#youTubeVideo").css('opacity', 1);
         }
     });

});

Overlay image over a you-tube video is not clickable on I-pod/ I-phone devices

2 Answers2

Linked