优酷 iframe 不服从 z-index答案

【问题标题】：Youku iframe not obeying z-index优酷 iframe 不服从 z-index
【发布时间】：2014-08-20 13:23:54
【问题描述】：

我有一个包含嵌入优酷视频的 iframe，但它不遵守 IE 中设置的 z-index 并超越一切。对于 YouTube 视频，我可以通过将 wmode 参数设置为 transparent 或 opaque 来解决此问题，但对优酷视频做同样的事情是行不通的。

<iframe width="720" height="405" src="http://player.youku.com/embed/[VIDEOCODE]?rel=0&wmode=opaque" frameborder=0 allowfullscreen></iframe>

关于如何解决这个问题的任何想法？

【问题讨论】：

标签： internet-explorer z-index wmode embedded-video

【解决方案1】：

我在包含 Youtube 和优酷视频的页面上安装了一个 fancybox 插件时遇到了同样的问题。对于 Youtube 视频，您可以在视频的 src url 末尾添加 ?wmode=opaque 或 &wmode=opaque。您在使用 &wmode=opaque 时使用 ? （又名查询参数）已在 src url 中使用。

优酷显然不这样做。但真正的问题是这两个视频都是基于 Flash 的插件。 Flash 不能很好地与您的 z-index 配合使用，并且有时需要您将其放回原位。所以下面的解决方案应该适用于任何基于 Flash 的插件，而不仅仅是优酷视频：

在嵌入之前插入<param name="wmode" value="transparent">（我知道您从优酷获取了 iframe 代码，但如果您仔细观察，他们有一个使用嵌入的 HTML 友好代码）并在给出的嵌入代码中插入 wmode="transparent" before >你的开口嵌入。

<div> <param name="wmode" value="transparent"> <embed src="http://player.youku.com/player.php/sid/XNzQxMjA3ODg0/v.swf" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" wmode="transparent"></embed> </div>

我已经在 IE8 及更高版本中对此进行了测试。效果很好。

【讨论】：

有没有办法使用他们的 javascript api 做到这一点？