在I-pod / I-phone设备上无法点击you-tube视频上的叠加图像 [英] Overlay image over a you-tube video is not clickable on I-pod/ I-phone devices

问题描述

我们正在开发youtube iframe API，我们在视频上有一个叠加图片。通过单击此图像，用户可以跳过整个视频。但是，在视频运行时，I-pad / I-phone设备上的图像无法点击。

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.

有没有办法触发位于iPhone / iPad上正在运行的视频上的图像的点击事件？

推荐答案

我想出了一种实现单击播放的方法（但我没有使用iFrame API）。这不是最漂亮的解决方案，但似乎有效。

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.

基本上，我在YouTube视频iFrame下面有我的'漂亮图像'，并设置了不透明度文档就绪时视频为零。然后我有代码确定鼠标何时在iFrame上，并且代码添加到window.blur事件（当用户点击iFrame时发生）。

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 ).

如果用户点击iFrame（包含YouTube视频），然后我将视频的不透明度更改为1.

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>

注意：我有CSS，其中包含父潜水中450px高图像的背景图像。

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

JavaScript：

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

});

这篇关于在I-pod / I-phone设备上无法点击you-tube视频上的叠加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！