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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16823636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:54:19  来源:igfitidea点击:

Overlaying a DIV On Top Of HTML 5 Video

htmlcsshtml5-video

提问by Josh Scott

I need to overlay a div ON TOP of a div containing an HTML 5 video. In the example below the overlaying div's id is "video_overlays". See example below:

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

采纳答案by Jules Martinez

There you go , i hope this helps

好了,我希望这会有所帮助

http://jsfiddle.net/kNMnr/

http://jsfiddle.net/kNMnr/

here is the CSS also

这里也是 CSS

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

回答by misterManSam

Here is a stripped down example, using as little HTML markup as possible.

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

The Basics

基础知识

  • The overlay is provided by the :beforepseudo element on the .contentcontainer.

  • No z-index is required, :beforeis naturally layered over the video element.

  • The .contentcontainer is position: relativeso that the position: absoluteoverlay is positioned in relation to it.

  • The overlay is stretched to cover the entire .contentdiv width with left / right / bottomand leftset to 0.

  • The width of the video is controlled by the width of its container with width: 100%

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

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

  • .content容器是position: relative,这样的position: absolute叠加定位相对于它。

  • 叠加层被拉伸以覆盖整个.contentdiv 宽度,left / right / bottomleft设置为0

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

The Demo

演示

.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>

回答by maninvan

Here's an example that will center the content within the parent div. This also makes sure the overlay starts at the edge of the video, even when centered.

这是一个将内容居中放置在父 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>

with css as

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

here's the jsfiddle https://jsfiddle.net/dyrepk2x/2/

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

Hope that helps :)

希望有帮助:)

回答by Bhumi Patel

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

for this you need to just add css like this:

为此,您只需要像这样添加 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;}