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

时间:2013-02-27 04:37:44

标签: jquery youtube fancybox z-index

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

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中仍然会发生这种情况?

由于

1 个答案:

答案 0 :(得分:3)

问题在于youtube的网址格式:

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