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:
Here is a stripped down example, using as little HTML markup as possible.
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%
.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>