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

Question

我正在寻找把一些文字放在谷歌驱动器嵌入式播放器上（使用iframe）

CSS＆amp; 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主题。请建议我，指出我的错误。

Answer 1

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;