在 HTML 5 视频之上覆盖一个 DIV答案

【问题标题】：Overlaying a DIV On Top Of HTML 5 Video在 HTML 5 视频之上覆盖一个 DIV
【发布时间】：2013-05-25 06:55:51
【问题描述】：

我需要在包含 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>

【问题讨论】：

如果您不想浮动，请尝试 maninvan 的解决方案。

标签： html css html5-video

【解决方案1】：

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

基础知识

覆盖由:before 容器上的:before 伪元素提供。
不需要 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="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>

【讨论】：

我不明白我们为什么需要padding-right: 40px; - 如果可能请解释一下。
@NamGVU - 视频的宽度是 .content div 的 100%，这意味着它们都是 500px。但是，视频也有 20 像素的边距，这意味着视频现在是 500px + 20px left margin + 20px right margin，总共覆盖了 540px 的宽度，将其推到了 .content 之外。 :before 元素也是 .content div 父元素的 100%，因此它的宽度为 500px。为了覆盖视频的额外宽度，需要将其扩展40px，因此需要填充。
@NamGVU - 实际上我现在稍微改变了它，以便填充在.content 上，将它推到540px，从而消除了对视频边距的需要。这种方式更优雅，从一开始就应该是这种方式:)
现在好多了。感谢您的精彩解释。
而不是使用顶部、右侧、底部：0。也可以通过 100% 的宽度和高度来实现这一点。一种方法比另一种更好是有原因的吗？

【解决方案2】：

这是一个将内容居中放置在父 div 中的示例。这也确保了覆盖从视频的边缘开始，即使居中。

<div class="outer-container">
    <div class="inner-container">
        <div class="video-overlay">Bug Buck Bunny - Trailer</div>
        <video id="player" src="https://wiki.yoctoproject.org/wiki/images/a/a6/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/

希望有帮助:)

【讨论】：

这是理想的工作流程。您甚至可以在外部容器内的内部容器之后添加额外的 div 以向下扩展页面。很好的建议。
我刚才查的时候在 Chrome 中是不行的。
@fletchsod 除了链接断开之外，代码没有任何问题。我修复了指向 webm 文件的链接。代码现在和以前一样工作！

【解决方案3】：

好了，希望对你有帮助

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

【讨论】：

注意 z-index:，如果你有一个覆盖或其他东西，你将不得不设置一个较低的 z-index .. 这只是为了避免在做这种事情时出现问题视频。
哦，它不起作用（我将 src 更改为 "clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" 但它在删除 "
" 行之前不起作用跨度>
jsfiddle 中的视频链接好像坏了。

【解决方案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;}

【讨论】：