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>

1
  • Try maninvan's solution if you don't want float.
    – beta208
    Jan 8, 2016 at 15:54

4 Answers 4

48

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>

6
  • I don't get why we need padding-right: 40px; - please explain if possible.
    – Nam G VU
    Aug 27, 2016 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. Aug 28, 2016 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 :) Aug 28, 2016 at 23:58
  • Much better now. Thanks for your great explain.
    – Nam G VU
    Aug 29, 2016 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? Dec 20, 2016 at 18:21
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 :)

3
  • 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 8, 2016 at 15:28
  • This doesn't work in Chrome when I looked it up just now.
    – fletchsod
    May 11, 2021 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, 2021 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;
}
3
  • 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. May 29, 2013 at 21:08
  • 1
    Oh, it doesn't work ( I changed src to "clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" but it doesn't work untill delete "<div id="video_overlays"></div>" line Nov 14, 2014 at 12:28
  • 4
    The video link seems to have broken in the jsfiddle. Jul 8, 2016 at 0: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;}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.