Fullscreen Video Background: with Only HTML and CSS

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;
}

Popular Tutorials

How to Create Animated Image Carousel with CSS

Image carousels are a great way to display multiple images in a…

VS Code Live Server and Perfect Browser Auto Refresh Feature

In this VS Code tutorial, we are going to take a look…

5 Awesome VS Code Plugins Useful in HTML

I have been using VS Code for a while now and I…

Fullscreen Video Background: with Only HTML and CSS

Want to create an immersive user experience on your website? Learn how…

Animated Underline Effect with HTML and CSS

The animated underline effect is a popular design trend that can add…

How To Create Custom Scrollbar in CSS

In this HTML and CSS tutorial, I will show you how to…