在 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
Overlaying a DIV On Top Of HTML 5 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
好了，我希望这会有所帮助
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 isposition: relativeso that theposition: absoluteoverlay is positioned in relation to it.The overlay is stretched to cover the entire
.contentdiv width withleft / right / bottomandleftset to0.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 / bottom并left设置为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;}
