Question

如果您访问以下网站，您会看到有一个YouTube视频，但是如果您在下面的任何产品上选择添加到购物车按钮，则弹出窗口会显示正在添加到购物车的产品。但是，YouTube视频通过它显示。这是一个Z索引问题还是我需要在YouTube的嵌入代码中添加一些标签？这个问题只发生在Chrome和Windows上的Windows中。 IE浏览器。任何浏览器中的MAC都不会出现此问题。我没有在Windows上检查Safari。

http://www.unicornfibre.com/pages/Power-Scour-.html

以下是问题的屏幕截图

This is a screenshot of the problem

Answer 1

来自http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix：

而不是像这样嵌入youtube iframe：

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI" frameborder="0" wmode="Opaque">

将嵌入式链接添加？wmode = transparent，如下所示：

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

这对我来说很有魅力。

Answer 2

$(document).ready(function ()
 {$('iframe').each(function()
     {var url = $(this).attr("src");
      var result = url.search(/youtube/i);
      if(result!=-1)
       {result = url.indexOf('?');
        if(result!=-1)  
          {$(this).attr("src",url+"&wmode=transparent");
          } else {$(this).attr("src",url+"?wmode=transparent");}
       }
     });
 });

这将修复链接到youtube的所有iframe的z-index。需要jQuery才能工作。将代码粘贴到空白js文件中并将其包含在源代码中。希望这有帮助

Answer 3

不确定如何使用iframe嵌入，但Flash电影需要有一个额外的参数：

wmode:"transparent" //instead of transparent you can also put opaque

flash影片在它上面有wmode之前不会监听z-index。

Answer 4

你可以通过将wmode设置为“opaque”

来解决这个问题

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>

Answer 5

对于iframe使用youtube的api（而不是使用硬编码的iframe元素）动态加载视频，您可以像这样更改播放器对象：

     player = new YT.Player('show', {
          height: '540',
          width: '960',
          videoId: firstID,
          playerVars: { rel:0,modestbranding:1, wmode: "transparent" },
          events: {
        'onStateChange': onPlayerStateChange
}

        });

如何修复IE中的ajax弹出窗口图层上的YouTube Flash视频叠加问题？铬？

5 个答案: