Fullscreen Video Background: with Only HTML and CSS

Web Development

Want to create an immersive user experience on your website? Learn how to add a fullscreen video background with just HTML and CSS in this step-by-step tutorial!

I’ll guide you through the entire process, from sourcing the perfect video to writing the right code to make it all come together. No JavaScript needed, just simple HTML and CSS! This is perfect for beginners and experienced web developers looking to elevate their site design.

Making a full-screen video background with HTML and CSS is also very simple. Fitting the video 100% on the screen and auto-playing the video are important elements.

In the video below, you can see the HTML codes for the full screen video background that we used while preparing the tutorial. The word muted means to mute the video. If your video has sound and you want to play it with sound, you need to remove the word muted.

<div id="hero">

    <video autoplay loop muted>
      <source src="video.mp4" type="video/mp4">
    </source></video>

    <div class="content">
      <div class="container">
        <h1><span id="Youtube_Sanagrafi">Youtube Sanagrafi</span></h1>
        <p>Fullscreen Background</p>
      </div>
    </div>

</div>

If you are interested in theme making in Wordpress, you can integrate the full screen video background into your Wordpress site, the logic is the same.

These codes are the codes you can use for style.css.

body {margin:0;padding:0;}

#hero {
  position:relative;
}

#hero video {
  height:100vh;
  width:100%;
  background-position:absolute;
  z-index:10;
  object-fit:cover;
}

#hero .content {
  background:rgba(0,0,0,0.5);
  height:100%;
  width:100%;
  z-index:20;
  position:absolute;
  top:0;
  left:0;
  text-align:center;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .content h1 {
  color:#FFF;
  font-family:Arial,sans-serif;
}

#hero .content p {
  font-size:18px;
  color:#FFF;
  font-family:Arial,sans-serif;
}