Наложение прозрачного фона на встроенное видео

У меня есть видео, которое я встроил в полноширотную div-панель. Я пытаюсь наложить градиент поверх него, но не могу заставить его работать. Я попытался настроить z-индекс, обернуть видео в другой div и - как показано ниже-добавить класс наложения, но я, должно быть, упустил что-то очевидное.

Что бы я ни пытался, видео прыгает обратно на другие панели (которые в конечном итоге падают позади него).

Был бы так благодарен за вашу помощь!

                <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>

Мой 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%;

  }