47

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>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
Josh Scott
  • 3,790
  • 7
  • 29
  • 31

4 Answers4

47

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>
Community
  • 1
  • 1
misterManSam
  • 24,303
  • 11
  • 69
  • 89
  • I don't get why we need `padding-right: 40px;` - please explain if possible. – Nam G VU Aug 27 '16 at 10:26
  • @NamGVU - The video has a width of 100% of the `.content` div ,which means they are both `500px`. However, the video also has a margin of 20 pixels which means the video is now `500px + 20px left margin + 20px right margin` for a total of `540px` of width to cover, pushing it outside `.content`. The `:before` element is 100% of the `.content` div parent as well, so it has a width of `500px`. In order to cover the extra width of the video, it needs to be extended by `40px`, hence the padding. – misterManSam Aug 28 '16 at 23:56
  • 1
    @NamGVU - I've actually now changed it slightly so that the padding is on `.content` pushing it to `540px`, eliminating the need for the video margin. It's much more elegant this way, and should have been this way from the start :) – misterManSam Aug 28 '16 at 23:58
  • Much better now. Thanks for your great explain. – Nam G VU Aug 29 '16 at 12:53
  • rather than using the top,right, bottom:0. it's also possible to achieve this with a width and height of 100%. Is there are a reason why one way is better than the other? – Damian Green Dec 20 '16 at 18:21
  • @DamianGreen - it wouldn't make a difference except you would have to use `top: 0; left: 0;` as well, otherwise the overlay will [obey its parents`20px` of padding](http://jsbin.com/qefedefomo/1/edit?html,css,output). So it simply looks cleaner the way I did it :) – misterManSam Dec 24 '16 at 10:56
21

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

maninvan
  • 890
  • 9
  • 10
  • 1
    This is the ideal workflow. You can even add additional divs after the inner container within the outer-container to expand down the page. Great suggestion. – beta208 Jan 08 '16 at 15:28
  • This doesn't work in Chrome when I looked it up just now. – fletchsod May 11 '21 at 17:29
  • @fletchsod There is nothing wrong with the code other than a broken link. I fixed the link to the webm file. The code works the same as before now! – maninvan May 24 '21 at 22:11
17

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;
}
Jules Martinez
  • 682
  • 1
  • 6
  • 23
  • Watch out with z-index:, if you have an overlay or something else, you will have to set a lower z-index .. this is just to avoid problems when doing this kind of stuff on videos. – Jules Martinez May 29 '13 at 21:08
  • 1
    Oh, it doesn't work ( I changed src to "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" but it doesn't work untill delete "
    " line     – Igor Pavlov Nov 14 '14 at 12:28
  • 4
    The video link seems to have broken in the jsfiddle. – Brendan Abel Jul 08 '16 at 00:17
6
<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;}
Bhumi Patel
  • 569
  • 4
  • 13