youtube视频后面的HTML覆盖答案

【问题标题】：HTML overlay going behind youtube videoyoutube视频后面的HTML覆盖
【发布时间】：2012-09-29 21:35:01
【问题描述】：

您好，我在网站内嵌入了一个 youtube 视频，但是当我单击按钮获取叠加层时，叠加层位于 youtube 视频的后面。这只发生在 Firefox 14 中，它在其他任何地方都可以正常工作...我尝试输入 wmode="transparent/opaque" 但它不适用于其中任何一个...

叠加框代码：

.box_4, .box_5, .box_6 {
  position: fixed;
  top: -1900px;
  left: 50%;
  z-index: 101;
  width: 883px;
  margin-left: -400px;
  }

【问题讨论】：

标签： css firefox

【解决方案1】：

问题是当您嵌入 youtube 链接时：

https://www.youtube.com/embed/kRvL6K8SEgY 在 iFrame 中，默认的 wmode 是窗口化的，这实际上给它的 z-index 大于其他所有内容，并且它将覆盖任何内容。

尝试将此 GET 参数附加到您的 URL：

wmode=不透明

像这样：

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

确保它是 URL 中的第一个参数。其他参数必须在后面

在 iframe 标记中：

例子：

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

见：overlay opaque div over youtube iframe

【讨论】：

【解决方案2】：

试试position: absolute -

.box_4, .box_5, .box_6 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
  width: 883px;
  margin-left: 0px;
  }

【讨论】：

【解决方案3】：

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

试试这个参数，它应该可以修复它。

问候，祝你好运……

【讨论】：