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

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

<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 做到这一点?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-07-16
    • 2014-07-16
    • 2011-12-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-31
    相关资源
    最近更新 更多