在HTML 5视频顶部叠加DIV

Question

我需要在包含HTML 5视频的div的div顶部叠加一个div。在下面的示例中，重叠div的ID为“ video_overlays”。请参见下面的示例：

<div id="video_box">
  <div id="video_overlays"></div>
  <div>
    <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
  </div>
</div>

Answer 1

您走了，希望对您有所帮助

Answer 2

这是一个精简的示例，使用尽可能少的HTML标记。

Answer 3

这里是将内容放在父div内的示例。这也可以确保覆盖图从视频边缘开始，即使居中也是如此。

Answer 4

<div id="video_box">
  <div id="video_overlays"></div>
  <div>
    <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
  </div>
</div>

为此，您只需要像这样添加css：
#video_overlays {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.46);
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#video_box{position: relative;}