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:

<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">

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 {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background:rgba(15, 102, 99, 0.5);
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;