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

Question

我是在大约一年前问这个问题的。

YouTube Video Embedded via iframe Ignoring z-index?

我在页面上有一个视频管。在该页面上，我想显示一个fancybox ..但由于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中仍然会发生这种情况？

谢谢

Answer 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 + "&wmode=opaque");
    }
});

这应该够了吧。参见 JSFIDDLE