Overlaying a DIV On Top Of HTML 5 Video

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>