Overlaying a DIV On Top Of HTML 5 Video - html

Question

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

Here is a stripped down example, using as little HTML markup as possible.
The Basics
The overlay is provided by the :before pseudo element on the .content container.
No z-index is required, :before is naturally layered over the video element.
The .content container is position: relative so that the position: absolute overlay is positioned in relation to it.
The overlay is stretched to cover the entire .content div width with left / right / bottom and left set to 0.
The width of the video is controlled by the width of its container with 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>

Answer 2

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 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>
with css as
.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/
Hope that helps :)

Answer 3

There you go , i hope this helps
http://jsfiddle.net/kNMnr/
here is the CSS also
#video_box{
float:left;
}
#video_overlays {
position:absolute;
float:left;
width:640px;
min-height:370px;
background-color:#000;
z-index:300000;
}

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>
for this you need to just add css like this:
#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;}