html - 在 HTML 5 视频上叠加一个 DIV

Question

我需要在包含 HTML 5 视频的 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

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

基础知识

• 覆盖层由 .content 容器上的 :before 伪元素提供。

• 不需要 z-index，:before 自然地在视频元素上分层。

• .content 容器是 position: relative 以便 position: absolute 叠加层相对于它定位。

• 叠加层被拉伸(stretch)以覆盖整个 .content div 宽度，left/right/bottom 和 left 设置为 0。

• 视频的宽度由其容器的宽度控制，width: 100%

演示

.content {
  position: relative;
  width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.content video {
  width: 100%;
  display: block;
}
.content:before {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="content">
  <video id="player" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/18/Big_Buck_Bunny_Trailer_1080p.ogv/Big_Buck_Bunny_Trailer_1080p.ogv.360p.vp9.webm" autoplay loop muted></video>
</div>