如何在嵌入式视频上叠加图像？答案

【问题标题】：How to overlay an image over embedded video?如何在嵌入式视频上叠加图像？
【发布时间】：2015-11-15 05:26:55
【问题描述】：

我正在寻找在 google drive 嵌入式播放器上放置一些文本（使用 iframe）

CSS 和 HTML：

#over {

  position: absolute;

  top: 0px;

  left: 0px;

  background-color: #FF0000;

  height: 30px;

}

<div>
  <div id="over">This is Preview</div>
  <iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>

但文本没有覆盖我网站上的视频播放器。我正在研究 wordpress mh-joylite 主题。请建议我，指出我的错误。

【问题讨论】：

标签： html css wordpress google-drive-api

【解决方案1】：

包装您的视频 iframe 和浮动文本并制作父 position: relative，如下所示：

.video {
  position: relative;
  display: inline-block;
  
  /* ie7 inline-block support */
  *display: inline;
  *zoom: 1;
}

#over {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #ff0000;
}

<div class="video">
  <div id="over">This is Preview</div>
  <iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>

【讨论】：

还是不行。文字显示在视频上方。
我很困惑，文本没有覆盖您页面中的视频吗？还是在演示中？将演示移植到 jsbin 以获得更好的视图，output.jsbin.com/yebayuvudi
您的视频和覆盖文本是否包含在具有 position: relative 属性的 div 中？你有该页面的链接，以便我看一下吗？
它在 position: relative 的 div 中...但我正在使用我的本地主机。我无法提供任何链接。不过我可以截图。
请您的代码也这样做，这样我就可以发现缺少的内容。如果包装容器已经有position: relative 属性，那么覆盖文本应该使用它作为它的边界点。除非您有负定位值，例如 top、left、bottom 或 right，或者只是某个地方的负边距。