css - 使用 DIV 重叠 Iframe 在 Firefox 上似乎不起作用

Question

我可以使用 div 重叠 iframe 使其不可点击吗？

这就是我所拥有的(但在 Firefox 中不起作用)

这是 HTML 代码:

<div class="container">
  <div class="do-not-allow-click"></div>
  <div class="iframe-container">
    <iframe width="420" height="315" src="//www.youtube.com/embed/T4-PSYiYUzQ" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

这些是 CSS 规则:

.container {
  position: absolute;
  top: 0;
  left: 0;
  height: 315px;
  width: 420px;
}

.do-not-allow-click {
  cursor: move;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9999;
}

.iframe-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

Answer 1

当您在 iFrame 中嵌入 youtube 链接时，默认的 wmode 是窗口化的，它应用比其他所有内容都大的 z-index 并在顶部覆盖。

要解决此问题，请像这样将 wmode=opaque 附加到源 URL

http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque

因此您的 iframe 代码将如下所示

<iframe width="420" height="315" src="http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque" frameborder="0" allowfullscreen></iframe>

检查这个:overlay opaque div over youtube iframe