在I-pod / I-phone设备上无法点击覆盖pipe图像的图像
我们正在研究YouTube上的iframe API，在video上有一个覆盖图像。 通过点击这个图像，用户可以跳过整个video。 但是，video运行时，图像无法在I-pad / I-phone设备上点击。
我已经为此build立了一个小的演示：
http://jsfiddle.net/nKqAQ/2/
Try to run above code on I-pad. 最初图像是可点击的，但是当video启动时，图像不会被点击。 video可以放大/缩小。
有什么办法来触发定位在iPhone / iPad上运行的video图像的点击事件？
在Iphone / Ipad上的iOS7中，youtubevideo是使用操作系统embedded式video播放器播放的，大多数情况下它会覆盖默认的html5播放器以及所有自定义设置。 这就是为什么你不能看到注释和移动广告。
我想出了一个方法来实现一个点击播放（但我没有使用iFrame API）。 这不是最漂亮的解决scheme，但似乎工作。
基本上，我已经在YouTubevideoiFrame下面获得了“漂亮的图像”，并且在准备好文档的时候将video的不透明度设置为零。 然后我有代码，确定何时鼠标在iFrame，并添加到window.blur事件（用户在iFrame中单击时发生）的代码。
如果用户点击iFrame（包含YouTubevideo），然后我将video的不透明度更改为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高的形象。
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); } }); });