button - youtube 视频阻止移动浏览器上的按钮

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-150 像素的区域无形重叠，移动浏览器用户无法点击任何元素。 (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>

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

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