Overlay black screen on video element

by Alaksandar Jesus Gene

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
    <div class="col-md-6 col-lg-6" ng-repeat="video in videos">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="overlay">sdsdsdsd</div>
                <video width="100%" class="video"> 
                    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
                </video>
            </div>
          </div>
      </div>
    </div>

CSS

.overlay{
    background-color:rgba(0,0,0,0.5);
    position:fixed;
    z-index:8000;
    width:100%;
    height:100%;
    color:#fff;
    content:"asdf"
    
}
.video{ position:relative;z-index:1000;}
.

JavaScript

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){

    $scope.videos =[0,1,2];

});