1. html code

We will have a class that will contain the video settings, we set the value of Autoplay, and add a few options for the video format to display on different devices:

</pre>
<div class="is_overlay"><video width="300" height="150" autoplay="autoplay"
loop="loop" poster="/videos/bck.jpg">
<source src="/videos/WD0221.mp4.mp4" type="video/mp4">
<source src="/videos/WD0221.webmsd.webm" type="video/webm">
</video></div>
<pre>

2. css code

The next part - styles. It is necessary to show the general parameters of the overlay and a little glow to the video background:

.box,.page {
position:fixed;
top:0;
left:0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
z-index:999;
background:rgba(15, 102, 99, 0.5);
color:white;
}
.is_overlay{
display: block;
width: 100%;
height: 110%;
}
.is_overlay video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(/videos/bck.jpg) no-repeat;
background-size: cover;
}