In This tutorial I will show you how to add a static video background using CSS, It’s a very simple and easy script and looks amazing on landing pages. In this tutorial we are using HTML5 <video> tag to embed video and CSS to put that video on background.

HTML5 Video used to add video on your page:

<video id="my-video" class="video" autoplay muted loop>
   <source src="videos/polina.mp4" type="video/mp4">
</video>

Above script add video using HTML5 <video> tag and in video properties we set it to mute, autoplay and loop it will play video automatically without sound and repeat it all the time in the source we put our video file.

CSS used to make video background working:

div, h1, p, a, video, h2{
    z-index: 2;
    position: relative;
}
.content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.content__heading {
  margin-bottom: 24px;
  color: rgb(39,39,39);
  font-size: 44px;
}

.content__teaser {
  margin-bottom: 24px;
  color: rgb(89,89,89);
  font-size: 22px;
}

.content__cta {
  display: inline-block;
  margin: 0;
  padding: 12px 48px;
  color: rgb(255,60,100);
  font-size: 22px;
  text-decoration: none;
  border: solid 4px rgb(255,60,100);
}

.video {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

Above CSS add video on full screen of your landing page.

That’s it.

I hope you like this tutorial please feel free to comment your problems we love to help you.