Trying to add a translucent overlay over video

Question

I'm trying to add a translucent overlay on my video. Not sure how to do this in my css.

css:

.video-div{
  display: flex;
  height: 22em;
  width: 100%;
  background-blend-mode: multiply;
  background-color: #666666;
  }
  
  .videoTag{
    object-fit: fill;
    max-width: 100%;
    width: 100%;
  }

React code

Check this [answer](https://stackoverflow.com/a/31428994/5935595), here on stackoverflow. — konstantinkoslow, Nov 04 '19 at 21:59

score 0 · Answer 1 · answered Nov 04 '19 at 22:31

* {
  top: 0;
}

.video-div {
  display: flex;
  height: 22em;
  width: 100%;
  background-blend-mode: multiply;
  background-color: #666666;
  opacity: 0.6;
}

video {
  width: 100%    !important;
  height: auto   !important;
  z-index: -1;
}

<div class="video-div">
  <video controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4">
  </video>

</div>

This will insert a translucent overlay over your video! If you're looking for something a little different, let me know and I'll rework my answer :)

Trying to add a translucent overlay over video

1 Answers1