How to overlay an image over embedded video?

问题

I'm looking put put some text over google drive embedded player (using 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>

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.

回答1:

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>

来源：https://stackoverflow.com/questions/33712979/how-to-overlay-an-image-over-embedded-video