youtube 视频阻止移动浏览器上的按钮答案

【问题标题】：youtube video blocks buttons on mobile browseryoutube 视频阻止移动浏览器上的按钮
【发布时间】：2013-05-15 06:47:03
【问题描述】：

您能帮我解决以下情况吗：我的网站上有一个 youtube 视频。

<iframe width="400" height="225" src=http://www.youtube.com/embed/jKIfjiIjd?
rel=0&  color=white&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>

在这个视频的下方和上方，我有一些表单元素，例如

 <button class = "button" id = "video" type = "submit" onClick = "javascript: somefunction();" >some value</button>

视频在自己的 div 中，按钮和表单元素在自己的 div 中。

这些按钮在桌面浏览器上运行良好，但在移动浏览器上，视频下方的这些按钮无法点击（顶部按钮工作正常）我发现如果我从页面中删除视频，所有按钮开始工作。在视频完全加载之前的前几秒钟，这些按钮也会起作用。因此，看起来，视频与下方 100-150 像素的区域无形重叠，移动浏览器用户无法点击任何元素。（ps 我尝试使用 1000 的 z-index - 无效）

请帮忙。感谢您的宝贵时间。

【问题讨论】：

附加信息，看起来视频隐形保持了 youtube 视频的原始高度 (480) 并阻止了视频顶部下方 480 像素的每个元素
附加信息，按钮在视频播放（或播放完毕）时起作用，就像在播放之前它的高度为 480 像素（即使我看到确定的 250 像素），然后开始转向250 像素。

标签： button video youtube

【解决方案1】：

我在使用 YouTube iFrame 时遇到了完全相同的问题。我整天都在测试。这是我所在的位置：

问题在于 YouTube iFrame 中的元素。

<video class="video-stream html5-main-video" controls="true" 
x-webkit-airplay="allow" data-youtube-id="..............."></video>

如果您“显示：无”，或者将其更改为“顶部：0”。它解决了这个问题。

但是，由于它在 iFrame 内部，我不知道如何更改它。

【讨论】：

关于这个的谷歌线程。 code.google.com/p/gdata-issues/issues/…

【解决方案2】：

要添加到此讨论中，请在此处添加指向该问题的小提琴的链接：

http://jsfiddle.net/krismeister/KynXG/5/

//<script src="http://www.youtube.com/player_api"></script>
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath  the iframe.<br><em>tap below the video and you will see no color change.</em></h1>
<div id="vid-placeholder"></div>
<div id="bg"></div>

【讨论】：