Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/72.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/40.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html IPAD上youtube视频的DIV不可点击_Html_Css_Ipad_Youtube - Fatal编程技术网

Html IPAD上youtube视频的DIV不可点击

Html IPAD上youtube视频的DIV不可点击,html,css,ipad,youtube,Html,Css,Ipad,Youtube,我正在为iPad开发一个网页,我有一个问题: 我正在插入一个youtube视频(如iframe),需要一个div来控制它 我已经知道了,在youtube视频的URL上使用了“?wmode=transparent”,还使用了z-index 在PC上,它工作正常,工作正常,我可以随时点击顶部div 在Ipad上,当第一次显示视频时,它会按预期工作,视觉上div会停留在视频的顶部,我可以点击div的内容 当我点击youtube上的“播放”按钮时,视频加载正确;但当我点击div内容时,click被传递到

我正在为iPad开发一个网页,我有一个问题:

我正在插入一个youtube视频(如iframe),需要一个div来控制它

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

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

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

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

有什么建议吗

编辑: Iframe如下所示:

<iframe style="width: 100%; height: 100%" src="http://www.youtube.com/embed/JQkActP-isE?wmode=transparent" frameborder="0" allowfullscreen=""></iframe>
<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如下所示:

<iframe style="width: 100%; height: 100%" src="http://www.youtube.com/embed/JQkActP-isE?wmode=transparent" frameborder="0" allowfullscreen=""></iframe>
<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变得不可读取。

我在您的Div中忽略了高度属性,这可能是问题所在。如果没有,那么您可以使用此方法而不是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>


嵌入标记和对象标记上是否都有wmode透明?这可能是焦点问题。使用JS手动关注外部div。一个代码示例可以进一步说明这个问题…@kyleSevenoaks我将其包括在内,因为没有嵌入和对象标记。Sry,我指的是
height
属性;/这个不见了。我编辑了我的帖子。谢谢你的帮助,但我不再参与这个项目了,我找不到解决方案,也无法测试你的。但是谢谢你;)