How do you add a color overlay to a video like this, as seen here:
Here is my code so far:
HTML
<div>
<div id="outer">
<div id="home-top-video">
<video autoplay loop muted width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="home-text">
<div><img src="http://marquesslondon.herokuapp.com/images/logo.ee1689ee.png"></div>
<h3>LIFESTYLE</h3>
</div>
</div>
</div>
</div>
CSS
#outer {
width: 100%;
display: block;
text-align: center;
position: relative;
overflow: hidden;
min-height: 100vh;
}
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#home-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Fiddle here: https://jsfiddle.net/kggv3213/1/