Video: overlay

A simple video with overlay element

by kiirosora

HTML

<div class="videoContainer">
    <div class="overlay"></div>
    <video autoplay loop muted>
        <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.mp4" type="video/mp4">
            <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.webm" type="video/webm">
    </video>
</div>

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