Overlay Image Over A You-tube Video Is Not Clickable On I-pod/ I-phone Devices

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-p

Solution 1:

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.

Solution 2:

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:

<divclass="pretty-graphic"style="opacity: 0;"><iframeclass="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);
         }
     });

});