Bootstrap 模态框与 YouTube 视频的 z-index 问题

Question

我正在使用Twitter Bootstrap模态框和YouTube视频在同一页上。在Chrome浏览器中，我遇到了Z-Index问题，即视频显示在模态窗口的上方。

如何解决这个问题？

http://mink7.com/projects/cmrc/home.html

- Harsha M V

Answer 1

您应该使用带有 ?wmode=transparent 参数的 YouTube 链接。

<iframe src="http://www.youtube.com/embed/EBSnWlpTPSk?wmode=transparent"></iframe>

如果您包含了对象/嵌入标签，则应为对象标签添加<param name="wmode" value="opaque" />，对于嵌入标签，应为wmode=transparent。

- Fatih Acet

---

这真的帮助了我。实际上，这篇文章应该被标记为答案，因为它解决了问题的核心。 - Oybek

如果你正在寻找JS API 使用SWFObject嵌入YouTube播放器的解决方案（就像我一样），只需将wmode transparent添加到params中 var params = { allowScriptAccess: "always", wmode: "transparent" };即可。 - Moreno

这个问题只在我的Internet Explorer浏览器中出现，但是添加&wmode=transparent解决了这个问题。YouTube视频也显示在固定的导航栏上方。 - Mark Rummel

Answer 2

你在页面上放置的YouTube视频是基于Flash技术。Flash对象单独渲染在窗口顶部，因为它们不属于HTML5堆栈的一部分。因此，z-index对其没有影响。

例如，请参见 http://www.google.com/search?q=flash+z-index。

- penartur

---

尝试更改URL但没有成功。您能分享嵌入代码吗？或者指向一个链接以进行修改？ - Harsha M V

抱歉，之前打错了。正确的网址是 http://www.youtube.com/embed/EBSnWlpTPSk?rel=0&wmode=transparent。 - penartur

太棒了，运行正常 :) 你能分享一下嵌入代码吗？这样我就可以添加进去以防万一 :) - Harsha M V

在 iframe 中有一个 <embed/>。您可以将此 <embed/> 直接放置在您的页面上（而不是包含它的 iframe），并添加 <param name="wmode" value="transparent"/>。 - penartur

添加wmode=transparent对我没有起作用 这是我的问题链接https://dev59.com/F3LYa4cB1Zd3GeqPct9E - Mandeep Jain

Answer 3

根据Fatih的建议，解决方案是传递wmode=transparent。对于IFrame API，我使用了以下内容：

var player = new YT.Player(pContainer, {
            height: 300,
            width: 400,
            videoId: contentID,
            playerVars : {wmode: "transparent"},
            events: {
                ...
                }
            }
});

- ankitjaininfo

Answer 4

你可以轻松地解决这个问题。

用法：

 <param name="wmode" value="opaque" />

在对象标签内部。

<object title="YouTube video player" width="480" height="390"   
data="http://www.youtube.com/embed/EBSnWlpTPSk"  
frameborder="0" wmode="Opaque">  
<param name="wmode" value="opaque" />
</object>

- user3809729

Answer 5

对象方法现已弃用：

https://developers.google.com/youtube/player_parameters

- Iain Doughty