CSS3 Background Gradient Overlay HTML5 Video

Question

I want to apply a CSS3 gradient overlay to a video. I have a feeling this could be to do with z-indexing / stack orders so here is my code.

Div structure:

<div class="wrapper">
    <div class="gradient">
        <video></video>
    </div>
</div>

The CSS I'm using is a background-image radial gradient:

.gradient {
        background-image: 
        radial-gradient(
            circle at 36% 48%, #000000, 
            rgba(11, 39, 65, 0.32) 87%, 
            rgba(0, 0, 0, 0.0)
        );
    }

The styling is applied to the gradient div along with position: relative; and z-index: 10; to make the gradient overlay the video.

The gradient doesn't appear at all - how is this achievable?

Possible duplicate of [Overlaying a DIV On Top Of HTML 5 Video](https://stackoverflow.com/questions/16823636/overlaying-a-div-on-top-of-html-5-video) — Durga, Nov 13 '17 at 11:55

Puka · Accepted Answer · 2022-01-03T08:29:26.713

2022 update

We can use the pseudo-element ::after to display a gradient over the whole image without unnecessary HTML markup. I've also chosen to use the aspect-ratio property to size the video but feel free to use any technique you like.

.wrapper {
  position: relative;
  width: 100%;
}

.wrapper::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-image: radial-gradient(
    circle at 36% 48%,
    #000000,
    rgba(11, 39, 65, 0.32) 87%,
    rgba(0, 0, 0, 0)
  );
}

video {
  width: 100%;
  aspect-ratio: 4/3;
}

<div class="wrapper">
  <video>
    <source
      src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Dancing-for-Food-in-the-Deep-Sea-Bacterial-Farming-by-a-New-Species-of-Yeti-Crab-pone.0026243.s002.ogv"
      type="video/webm"
    />
  </video>
</div>

Historical answer

You must set width and height to the div containing the gradient in order to be displayed. Then, use z-index to put the div on top of the video

You can do it that way :

.wrapper {
  position: absolute;
  width: 100%;
}

.gradient {
  background-image: radial-gradient(
    circle at 36% 48%,
    #000000,
    rgba(11, 39, 65, 0.32) 87%,
    rgba(0, 0, 0, 0)
  );
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 600px;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

video {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 600px;
  object-fit: cover;
}

<div class="wrapper">
  <div class="gradient"></div>
  <video>
    <source
      src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Dancing-for-Food-in-the-Deep-Sea-Bacterial-Farming-by-a-New-Species-of-Yeti-Crab-pone.0026243.s002.ogv"
      type="video/webm"
    />
  </video>
</div>

Notice that I've pulled the video element out of the gradient div, so it can be displayed on top of it.

Hope it'll help.

You're welcome. Be careful, this is not responsive : you have to adjuste the height of the gradient manually. I think it's possible to make it responsive but it would be much more complicated... — Puka, Nov 13 '17 at 12:28
I'm now finding that is my issue. The video I have is responsive and the height expands outside of the gradient. Would you have any ideas on a solution for this? — Filth, Nov 13 '17 at 12:46
@Filth I surely do, just give me some time :). Could you share the way the video is sized ? — Puka, Nov 13 '17 at 12:50
Thank you - the video is sized like so: width: 100%; height: calc(100vh - 80px); min-height: 600px; -o-object-fit: cover; object-fit: cover; The parent div has: position: absolute; width: 100%; Hope this helps. — Filth, Nov 13 '17 at 12:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158863/discussion-between-filth-and-youdeservethat). — Filth, Nov 13 '17 at 14:25

score 2 · Answer 2 · answered Nov 13 '17 at 11:54

<div class="wrapper">
    <video></video>
    <div class="gradient">
    </div>
</div>

Move the video out of the gradient div, now position the gradient over the video with position: absolute and because you have z-index: 10; it should cover the video properly.

One issue with this solution that you will most likely run into if you actually give the .gradient fixed height & width it will cover the video controls and they won't be clickable.

score 1 · Answer 3 · answered Nov 13 '17 at 11:55

Try this

add a sibling to video make its position:absolute and add z-index

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    //padding: 20px;
    border-radius: 5px;
    background-attachment: scroll;
    overflow: hidden;
}
.wrapper video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
}
.wrapper .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
   background-image: 
        radial-gradient(
            circle at 36% 48%, #000000, 
            rgba(11, 39, 65, 0.32) 87%, 
            rgba(0, 0, 0, 0.0)
        );
}

<div class="wrapper">
<div class="overlay"></div>
    <div class="gradient">
        <video>
          //your video
        </video>
    </div>
</div>

CSS3 Background Gradient Overlay HTML5 Video

3 Answers3