How To Add a Background Video in HTML with CSS | Full page Background Video

Welcome to Coding Power! If you are looking for how to add Background Video in HTML with CSS, then you don’t have to go anywhere else because in this article you can learn how to do that with a proper code explanation and full source code.

Introduction

Watch the Full Tutorial on YouTube

I have made one video on YouTube on how to add a full-screen Background Video in HTML with CSS. So, if you prefer video over blog posts, then you can watch this full tutorial on my YouTube channel, and then you can come back here if you need the full source code. You can also check out more tutorials on my channel and subscribe if you like my content.

Source code for the Background Video in HTML

Creating the HTML Structure

First, create one file with the name index.html for all the HTML code for the Background video in HTML.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Background Video</title>
</head>
<body>

    <div class="home">
        <video src="video.mp4" autoplay muted loop></video>
        <div class="overlay"></div>
        <div class="content">
            <h1>Full-Screen Background Video Using HTML and CSS</h1>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis fuga aliquid, doloribus culpa ab quam officiis quibusdam rem eligendi necessitatibus mollitia facere, voluptatibus porro ut architecto. Blanditiis corporis molestias, qui quidem dicta laboriosam tempore deserunt sit, possimus, dignissimos accusamus minima totam nihil aperiam maiores explicabo! Dolores nihil quis possimus perferendis!</p>
            <button><a href="#">Read More</a></button>
        </div>
    </div>

</body>
</html>

Styling with CSS

For Styling Create a new file with the name styles.css and add a style link to the HTML head to link to the CSS file. If you miss that, then CSS will not work for any HTML class or element, so make sure of that first.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.home{
  width: 100%;
  height: 100vh;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}

.home .overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #8ac3bf;
  mix-blend-mode: overlay;
}

.home .content{
  width: 800px;
  margin: 0 auto;
  color: white;
  text-align: center;
  z-index: 2;
}

.home .content h1{
  font-size: 50px;
  margin-bottom: 30px;
}

.home .content p{
  width: 650px;
  margin: 0 auto;
  line-height: 1.3;
  margin-bottom: 30px;
}

.home .content button{
  width: 150px;
  font-size: 20px;
  padding: 10px;
  border: none;
  cursor: pointer;
  outline: none;
  border-radius: 10px;
  background-color: rgb(251, 255, 0);
}

.home .content button a{
  text-decoration: none;
  color: black;
}

That’s all you must do for the background video in HTML and CSS. Still, if you are facing any kind of issue after using the above code, you can download the full source code with the video shown in the video tutorial by clicking on the below button. Also, you will get only one zip file after downloading, so unzip that file for HTML, CSS, and images.

Conclusion

In this blog, we have shown all the steps with a proper explanation of the full code, so it will help you learn and create background videos in HTML and CSS according to your needs. Still, if you are not getting anything from the above code or if you have any doubts regarding the card slider, feel free to leave your question in the comment section. I am happy to help.

FAQ

Can we add a video background in HTML and CSS?

Yes, we can add video on the background using the video tag.

How to insert video in HTML with CSS?

In HTML5, a video tag was added to show the video on the webpage. With the help of a video tag, you can display multiple-format videos using the src attribute of the video tag. Also, there are other attributes like width and height for more customization.

Leave a Comment