【问题标题】:DIV over youtube video on IPAD is not clickeableIPAD 上 youtube 视频上的 DIV 不可点击
【发布时间】:2012-08-13 02:37:14
【问题描述】:

我正在为 iPad 开发网页,但遇到了问题:

我正在插入一个 youtube 视频(作为 iframe)并且需要一个 div 来保持它的顶部。

我已经知道了,在 youtube 视频的 URL 上使用“?wmode=transparent”,并且也使用了 z-index。

在 PC 上它工作正常,按预期工作,我可以随时点击顶部 div。

在 Ipad 上,第一次显示视频时,按预期工作,视觉上 div 停留在视频顶部,我可以点击 div 内容。

当我点击 youtube 上的“播放”按钮时,视频已正确加载;但是当我点击 div 内容时,点击传递给 youtube 播放器,div 不再可点击。

有什么建议吗?

编辑: iframe 看起来像这样:

<iframe style="width: 100%; height: 100%" src="http://www.youtube.com/embed/JQkActP-isE?wmode=transparent" frameborder="0" allowfullscreen=""></iframe>

顶部 div 如下所示:

<div class="topdiv" style="position: absolute; right: -410px; width: 400px; display: block; background-color: rgb(255, 255, 255); z-index: 500000; background-position: initial initial; background-repeat: initial initial; ">

注意:播放视频时,Div 变得不可点击。

【问题讨论】:

  • 嵌入标签和对象标签上的 wmode 透明吗?
  • 这可能是焦点问题。使用JS手动关注外层div。一个代码示例可以进一步阐明这个问题......
  • @kyleSevenoaks 我将它包含为

标签: html css ipad youtube


【解决方案1】:

我在您的 div 中错过了可能是问题的 height 属性。如果没有,那么您可以尝试使用此方法而不是 iframe:

<object width="560" height="340" wmode="transparent">
            <param name="movie" value="http://www.youtube.com/v/rUL0M__g1k4">
            <param name="allowFullScreen" value="true">
            <param name="allowscriptaccess" value="always">
            <embed src="http://www.youtube.com/v/rUL0M__g1k4" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340">
 </object>

【讨论】:

  • 对不起,我的意思是 height 属性;/ 这个属性不见了。我编辑了我的帖子。
  • 感谢您的帮助,但我不再从事该项目,我找不到解决方案,也无法测试您的解决方案。但是谢谢;)
猜你喜欢
  • 2011-05-16
  • 2014-03-30
  • 2019-11-14
  • 1970-01-01
  • 1970-01-01
  • 2012-06-14
  • 2015-06-09
  • 2013-06-21
  • 2018-02-07
相关资源
最近更新 更多