1

你能帮我解决以下情况吗：我的网站上有一个 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 - 无效）

请帮忙。感谢您的时间。

4

2 回答 2

0

要添加到此讨论中，附上一个链接到这里的问题的小提琴：

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>
于 2013-05-21T02:30:14.460 回答
0

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

问题在于 YouTube iFrame 中的元素。

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

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

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

于 2013-05-16T21:12:51.453 回答