Are you bored with your website’s current look? This article will teach you how to add an amazing background video in HTML and CSS. A background video is a piece of video content that is used as your website’s background.
Adding an HTML background video in HTML to your website’s page can improve user experience, engagement, and visual appeal. Furthermore, it improves SEO ranking. However, if the background video in HTML is not optimized correctly, it can have a negative impact.
Table of Contents
Introduction
We will see how to add soundless clips that play on a loop without requiring the site users to press play or follow a link to a third-party platform like YouTube. These types of videos are known as ‘ambient videos’.
In this article, you will learn how to add a perfect background video in HTML and CSS by following easy-to-follow steps. After this, you will be confident in incorporating this design and enhancing your website.
Watch the full tutorial on YouTube
Sometimes, watching a video tutorial rather than reading an article can help you understand the concept easily. If you prefer that, I have created a video on the Background Video in HTML and CSS on my YouTube channel. You can access the complete source code here if needed. While you are at it, do subscribe and like the content.
Source code for the Background Video in HTML and CSS
Creating the HTML Structure
First, create a file named index.html with the default HTML boilerplate code for the background video.
Create a div with the class name ‘home’ consisting of a video element, a div with the class name ‘overlay’, and another with the class name ‘content’.
The video element has an src attribute that specifies which video to play with attributes like autoplay, muted, and loop. Finally, the content div consists of a heading element, a paragraph element, and a button.
Copy and paste the following HTML code into the file named index.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
Create a file named style.css and link it to the HTML. This step is essential; otherwise, the styles will not be applied.
Style the home div to take up the full height and width of the viewport with a flex display, centered align-items, centered justify-content, and a background color of black. The video element is styled to have absolute positioning with hidden overflow and a cover object-fit.
The overlay div is styled to have an absolute positioning with a width and height of 100%, a background of #8ac3bf, and a mix-blend mode of overlay. Now, the content div is styled to have center text alignment with white-colored text and a z-index of 2.
The heading element is styled to have a font size of 50 pixels, and the paragraph element is styled to have a line height of 1.3. Finally, the button element is styled to have a font size of 20 pixels with a pointer cursor, a border radius of 10 pixels, and a yellow background.
Refer to the following CSS code and paste it into the file named style.css:
*{
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;
}After following the above steps, you can create an impressive background video in HTML with CSS. The complete source code shown in the tutorial can be accessed by clicking the following button.
Conclusion
Now that we have learned how to add background video in HTML and CSS, please leave your questions in the comment section if you still have any doubts. I will be happy to clarify them as soon as possible.
Do Visit: How To Create The Best Login Form In HTML and CSS
FAQ
Can we add a video background in HTML and CSS?
We can add background video in HTML and CSS using the video tag. The <video> HTML element embeds a media player that supports video playback into the document.
How to insert video in HTML with CSS?
In HTML5, a video tag was added to show the video on the webpage. The src attribute of the video tag allows you to display multiple-format videos. Other attributes, like width and height, allow for more customization.
How to make background full screen in CSS?
To set a full-page background in CSS, use the background-size and background-position properties. The image will scale to cover the entire container when the background size is set to cover.