如何在 chrome 中将 div 放置在嵌入式视频播放器的顶部答案

【问题标题】：How can I place a div on top of an embedded video player in chrome如何在 chrome 中将 div 放置在嵌入式视频播放器的顶部
【发布时间】：2013-06-05 09:59:18
【问题描述】：

我有一个代码可以在 iframe 上放置一个 div，它可以工作。但是，当我将 iframe 的 src 设置为 youtube/vimeo 播放器时，在 chrome 中 iframe 保持在顶部（它在 safari 和 FF 中运行良好）。

有没有办法解决这个问题？ CSS：

#over{
    float: left;
    margin-top: -293px;
    margin-left: 185px;
    background-color: #FF0000;
    height: 30px;
}
iframe{
    float: left;
    width: 100%;
    height: 550px;
}

HTML：

<div>
  <iframe src="http://player.vimeo.com/video/67124108?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;wmode=transparent">
    You don't have iframe support, unfortunately
  </iframe>
  <div id="over">I'm over the iframe</div>
</div>

[在工作中可以看到：http://jsfiddle.net/QPXAT/]

【问题讨论】：

标签： html iframe youtube vimeo

【解决方案1】：

当您尝试添加z-index 时，您是否指定了定位？ z-index 仅适用于定位元素。所以我在两者中都添加了position: relative。这就是你想要的效果吗？

http://jsfiddle.net/QPXAT/1/

【讨论】：

【解决方案2】：

你不需要惹z-index。
删除浮动并将position: absolute 添加到顶部<div>，它应该可以工作。

#over {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  width: 100%;
  height: 30px;
  top: 293px;
}

iframe {
  float: left;
  width: 100%;
  height: 550px;
}

【讨论】：

【解决方案3】：

不是 iframe 的问题，而是 flash 播放器的问题。

Flash 有所谓的wmode，它指定嵌入对象应如何与其他 html 内容一起显示。

通常它位于一切之上，但也可以指定它以兑现z-index 等。

wmode=window ：通常是默认选项。这会将 Flash 影片置于 HTML 页面上的所有其他内容之上。

wmode=opaque ：此模式应该让 Flash 在 HTML 页面中正常播放并遵守 z-index 排序。

这是一个很好的总结：

http://www.8bitrocket.com/2011/02/11/quick-guide-to-wmode-and-flash-embedding/

【讨论】：

尝试使用 wmode=opaque 添加 z-index，不好 - 在 safari 和 FF 中有效，在 Chrome 中无效。
wmode 必须添加到 flash 对象 - 而不是 iframe，因为它托管在 youtube 上，所以您不能这样做。