Menu
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>
271
By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.
First, we will need to create the base video element, so we have a video to add overlays to. We'll need to style this video element to make it full width, so we have room to insert our overlays. Let's observe the rendered code. We can see above we've built a simple video with a header and title.
Use CSS position: absolute; followed by top: 0px; left 0px; in the style attribute of each DIV. Replace the pixel values with whatever you want. You can use z-index: x; to set the vertical "order" (which one is "on top"). Replace x with a number, higher numbers are on top of lower numbers.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
