Make Div Overlay Match Video Div Exactly

I'm trying to make a div to overlay this div in bootstrap4

Remove Video Background

Ex

Solution 1:

There was some weird issues with positioning. After a bit, I learned that overlays have to be sibling divs, if not it will not work. There was also issues with the position being absolute on both, one had to be relative and the other absolute.

Here is the final css

#video {     position: relative; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

and html

<div class="d-none d-md-block">
  <div id="overlay"></div>
  <video id="video" width="320" height="240" controls loop autoplay>
  <source src="/static/backgroundremover.mp4"type="video/mp4">
  <source src="/static/backgroundremover.ogg"type="video/ogg">
  <img src="/static/backgroundremover.gif">
  Your browser does not support the video tag.
  </video>
</div>

Share