Hello everyone, you can learn how to create a Background Video page using HTML and CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Background Video Page
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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>FullScreen 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>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
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 It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
