Hero Section With Video Background Using HTML, CSS, and JavaScript
A Hero Section with Video Background is a very effective method in creating an outstanding and impressive website look. It is a design trend which uses an interesting video to convey its message, thus making the experience of the users interesting.
Here is the free source code for this feature, which is written following good programming practices. This will help you apply a clean looking hero section to your site with relative ease.
GitHub Source: Hero Section With Video Background
Features
- Video Background: The hero section of a site has always been the center of attention as it plays an important role to attract the visitors’ attention immediately with a full-screen video.
- Easy to Customize: Regarding the coding, it remains rather standardized, and you can modify the video or text in the quickly, or the color in the simplest way.
- Compatibility: This design is compatible with the current trends used by different browsers and its responsive in nature for various screen resolutions.
- Clean Code: The source code also looks clean and optimize and the commented lines makes it advocates for good code writing practices.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- Hero Section with Content Left
- 20 Best Programming Practices
- QR Code Generator
- Modern Animated Pricing Table
- Hero Section with Snowfall Effect
Video Tutorial
Steps to Build Hero Section
Create Project Folder: Begin by finding an empty place in your disk to create a new folder, which you will use for your work.
Create index.html: Within the created folder, there must be an index.html as the structure of the web page that is to be developed.
Create style.css: To put a design on your hero section, create a style.css file in the same directory as your HTML file.
Copy & Paste the Code: Below is the code that you can use to start with your hero section.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- Designed by Shokat Javed at JV Codes (www.jvcodes.com) -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Your Website With Background Video</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<video autoplay loop muted plays-inline>
<source src="hospital.mp4" type="video/mp4">
</video>
<div class="navbar">
<img class="logo" src="hospital-logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Doctors</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<h1>QUALITY CARE FOR YOU</h1>
<div>
<button type="button">Learn More</button>
</div>
</div>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the hero section:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.banner{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.40),rgba(0,0,0,0.40));
background-position: center;
background-size: center;
}
.navbar{
width: 90%;
padding: 30px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 120px;
margin-top: -10px;
cursor: pointer;
}
.navbar ul li{
list-style: none;
display: inline-block;
margin: 20px;
}
.navbar ul li a{
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: 600;
padding: 15px;
}
li a:hover{
background: white;
transition: 0.6s;
}
.navbar a:hover{
color: black;
}
.content{
width: 100%;
position: absolute;
color: white;
top: 45%;
transform: translateY(-50%);
text-align: center;
}
.content h1{
margin-top: 80px;
font-size: 90px;
font-weight: 800;
}
button{
width: 200px;
padding: 15px;
margin: 20px 5px;
text-align: center;
border-radius: 25px;
color: black;
border: 2px;
font-size: 20px;
cursor: pointer;
font-weight: 600;
}
button:hover{
background: rgb(0, 192, 226);
transition: 0.5s;
}
button:hover{
color: white;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
animation: fadeLoop 2s infinite;
}
@media(min-aspect-ratio: 16/9){
.banner video{
width: 100%;
height: auto;
}
}
Download Source Code
Here, you will find the Source Code for the Hero Section With Video Background Using HTML and CSS free from any copyright issues. Well, to enjoy this feature, you just have to click the button below and get it for your website right now.
Conclusion
Hero Section With Video Background is a unique and basic design that helps increase a website’s appeal. Place this code on your webpage and remember to credit JV Source Codes through linking to this site.
If you need more tutorials like this, make sure to subscribe to our channel. Have a question? Leave it in the comment section below and I will respond to it as soon as I can. Happy coding!
