4

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

我该如何解决这个问题？

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

在此处输入图像描述

4

5 回答 5

12

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

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

如果您包含您的对象/嵌入标签，那么您应该添加<param name="wmode" value="opaque" />对象标签，wmode=transparent嵌入标签。

于 2012-12-25T15:13:27.973 回答
5

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

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

于 2012-05-15T05:10:37.043 回答
1

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

var player = new YT.Player(pContainer, {
            height: 300,
            width: 400,
            videoId: contentID,
            playerVars : {wmode: "transparent"},
            events: {
                ...
                }
            }
});
于 2014-02-10T06:49:06.350 回答
0

你可以很容易地解决这个问题。

采用：

 <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>
于 2015-04-22T10:29:19.400 回答
0

现在不推荐使用 OBJECT 方法：

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

于 2015-07-01T10:10:29.093 回答