Create HTML5 Fullscreen Static Video Background Using CSS

This tutorial will show you how to add a static video background using CSS. It’s a straightforward and easy script and looks fantastic 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. 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 the full screen of your landing page.

That’s it.