Adding a light gray overlay to a Coverr.co video?

I'm trying to add a gray overlay on a video from Coverr.co, but still behind the text. I tried using rgba() to add the color and opacity but it doesn't seem to work for me. Heres the code:

.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    width: 100%;
}

<div class="video-container">
        <div class="filter"></div>
          <video autoplay loop class="fillWidth">
            <source src="Productive-Morning/MP4/Productive-Morning.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="Productive-Morning/WEBM/Productive-Morning.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
          </video>
        <div class="poster hidden">
            <img src="Productive-Morning/snapshots/Productive-Morning.jpg" alt="">
        </div>
    </div>