Question

我需要覆盖包含HTML 5视频的div的div ON TOP。在下面的示例中，重叠的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标记。

基础知识

叠加层由:before容器上的.content伪元素提供。
不需要z-index，:before自然分层在视频元素上。
.content容器为position: relative，因此position: absolute叠加层与其相关。
覆盖图被拉伸以覆盖整个.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="http://video.webmfiles.org/big-buck-bunny_trailer.webm" autoplay loop muted></video>
</div>

Answer 2

你去，我希望这有帮助

http://jsfiddle.net/kNMnr/

这里也是CSS

#video_box{
    float:left;
}
#video_overlays {
position:absolute;
float:left;
    width:640px;
    min-height:370px;
    background-color:#000;
    z-index:300000;
}

Answer 3

这是一个将内容置于父div中心的示例。这也可以确保叠加层始于视频边缘，即使是居中也是如此。

<div class="outer-container">
    <div class="inner-container">
        <div class="video-overlay">Bug Buck Bunny - Trailer</div>
        <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" controls autoplay loop></video>
    </div>
</div>

用css作为

.outer-container {
    border: 1px dotted black;
    width: 100%;
    height: 100%;
    text-align: center;
}
.inner-container {
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 20px;
    font-family: Helvetica;
    color: #FFF;
    background-color: rgba(50, 50, 50, 0.3);
}
video {
    width: 100%;
    height: 100%;
}

这里是jsfiddle https://jsfiddle.net/dyrepk2x/2/

希望有所帮助：）

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

在HTML 5视频上叠加DIV

4 个答案:

基础知识

演示