Bootstrap模态与Youtube视频z-index问题

Question

我在同一页面上使用Twitter Bootstrap Modal和Youtube Video。我正面临Z-Index问题，其中视频显示在Chrome浏览器的模态窗口上方。

我该如何解决这个问题？

  

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

Answer 1

您应该使用带有？wmode = transparent param的YouTube网址。

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

如果您添加了object / embed标记，则应为对象标记添加<param name="wmode" value="opaque" />，为嵌入标记添加wmode=transparent。

Answer 2

您在网页上放置的YouTube视频是基于Flash的。 Flash对象在窗口顶部单独呈现，因为它们不是HTML5堆栈的一部分。 Z-index对这些没有影响。

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

Answer 3

正如法提赫所建议的，解决方案是通过wmode=transparent。对于IFrame API，我使用了以下内容：

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

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>

Answer 5

OBJECT方法现已弃用：

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