html - Overlaying a transparent background on an embedded video -

i've video i've embedded in fullwidth div panel. i'm trying overlay gradient on top of it, can't make work. i've tried adjusting z-index, wrapping video in div, , - below - adding overlay class, must missing obvious.

whatever try, video jumps on top of other panels (which end falling behind it).

would grateful 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 is:

.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%;   } 

here fiddle

i used green overlay demo.

css

.videocontainer {     position: relative;     width: 100%;     height: 100%;     //padding: 20px;     border-radius: 5px;     background-attachment: scroll;     overflow: hidden; } .videocontainer video {     min-width: 100%;     min-height: 100%;     position: relative;     z-index: 1; } .videocontainer .overlay {     height: 100%;     width: 100%;     position: absolute;     top: 0px;     left: 0px;     z-index: 2;     background: green;     opacity: 0.5; }