youtube 视频位于忽略 wmode 的所有其他内容之上答案

【问题标题】：youtube video sits above all other content ignoring wmodeyoutube 视频位于忽略 wmode 的所有其他内容之上
【发布时间】：2013-02-27 04:37:43
【问题描述】：

我是在大约一年前的一篇帖子后面问这个问题的。

YouTube Video Embedded via iframe Ignoring z-index?

我在一个页面上有一个 YouTube 视频。在那个页面上我想展示一个花式框..但是由于 youtube 视频这不起作用

我已经在代码中添加了

jQuery(document).ready(function (){
    jQuery('iframe').each(function(){
        var url = jQuery(this).attr("src");
            if (jQuery(this).attr("src").indexOf("?") > 0) {
                jQuery(this).attr({
                  "src" : url + "&wmode=transparent",
                  "wmode" : "Opaque"
                });
            }
    });
});

这将被添加到代码中

<iframe width="500" height="281" src="http://www.youtube.com/v/TUNROkqBte4?theme=light&showinfo=0&modestbranding=0&border=0&fs=1" frameborder='0'></iframe>

这是我无法改变的。

为什么在添加了 jquery 的 ie7/8 中仍然会发生这种情况？

谢谢

【问题讨论】：

将 "src" : url + "&wmode=transparent" 改为 "src" : url + "&wmode=opaque",
不高兴-虽然谢谢
它只发生在 IE7/IE8 中吗？
您是否尝试过降低 iframe 容器的 z-index 并为fancybox 提高它？还是完全设置它们？
是的..它只是发生在 youtube vids 上

标签： jquery youtube fancybox z-index

【解决方案1】：

问题在于 youtube 的 URL 格式：

http://www.youtube.com/v/...

... 不适合在 iframe 标记中使用。

iframe 的正确格式应该是：

http://www.youtube.com/embed/...

如果您无法更改它，请使用 javascript .replace() 方法即时替换它，例如：

jQuery('iframe').each(function () {
    var url = jQuery(this).attr("src").replace(new RegExp("/v/", "i"), '/embed/');
    if (jQuery(this).attr("src").indexOf("?") > 0) {
        jQuery(this).attr("src", url + "&amp;wmode=opaque");
    }
});

这应该可以解决问题。请参阅JSFIDDLE

【讨论】：