Add transparent background to embedded video

I have a video that I have embedded in the divwidth panel. I'm trying to overlay a gradient on top of it, but I can't seem to get it to work. I tried to adjust the z-index, wrap the video in another div and add an overlay class like below, but I must be missing something obvious.

No matter what I try, the video jumps back on top of other panels (which eventually lag behind it).

It would be so grateful for your help!

                <div class="videoContainer hide-for-small-only">
                    <div class="overlay"></div>
                  <video autoplay loop muted>
                        <source src="<?=URL?>public/videos/vid.mp4" type="video/mp4">
                        <source src="<?=URL?>public/videos/vid.webm" type="video/webm">
                  </video>
                </div>

      

        
        
        
      

    

My css:

.videoContainer 
{

  position: absolute;
  width: 100%;
  height: 100%;
  //padding: 20px;
  border-radius: 5px;

  background-attachment: scroll;
  overflow: hidden;
}

.videoContainer video 
{
    min-width: 100%;
    min-height: 100%;
}
.videoContainer overlay {
    background: black;
    opacity: 0.5;
    position: absolute;
    z-index: 1;
    text-align: center;
    margin: 0%;
  }