Question

你可以帮助我解决以下问题：我的网站上有一个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-150px的区域，并且移动浏览器用户无法点击任何元素。（ps我曾尝试使用1000的z-index - 没有效果）

请帮忙。谢谢你的时间。

Answer 1

我在YouTube iFrame上遇到了完全相同的问题。我整天都在测试。这是我在的地方：

问题是YouTube iFrame中的元素。

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

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

但是，因为它在iFrame中，我不知道如何改变它。

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

移动浏览器上的youtube视频块按钮

2 个答案: