如何在嵌入式视频上叠加图像? [英] How to overlay an image over embedded video?

问题描述

我正在把一些文本放到Google Drive嵌入式播放器上(使用iframe)

I'm looking put put some text over google drive embedded player (using iframe)

CSS&HTML:

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主题.请建议我，指出我的错误.

But the text is not overlaying the video player on my site. I'm working on wordpress mh-joylite theme. Please suggest me, point my mistakes.

推荐答案

将视频iframe和浮动文本换行，并使其父代 position:relative 如下:

Wrap your video iframe and floating text and make the parent position: relative, like so:

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

这篇关于如何在嵌入式视频上叠加图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！