How To Make website with a Background Video using HTML CSS and JAVASCRIPT | STEP BY STEP

Last Updated on September 30th, 2021 by Codevo
website header with video background

In this article, we are going to build a responsive website header with video background using HTML, CSS and some few lines of JAVASCRIPT.

In my previous article, we created a Godaddy Responsive Portfolio Website with HTML, CSS and JAVASCRIPT. If you haven't checked it out then do so because it contains a lot of golden tips and tricks.

This is not a full website but only the header, you can add your own sections like building cards, adding some images, creating your own footer, adding contact section and so on.

You can download the setup files if you want to code along. There would be a video below to guide you through how you can build the website yourself.

The setup folder contains two files and a subfolder. An index.html where I have already linked the stylesheet and also changed the title.

For the stylesheet, I have already imported the fonts and also remove the browser default padding and margin. Lastly, the folder with the name assets contains the video and the icons we are going to use for the website.

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>
<section class="container">
<header>
<div class="logo">
<img src="./assets/jet.svg" alt="" />
<span>Discover</span>
</div>
<div class="icon"></div>
</header>
<video src="./assets/Bg-Video.m4v" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h1>Video Background</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quas
quia dolor nihil alias dolore nostrum voluptates rerum fugiat dicta.
</p>
<a href="#">Dicover more</a>
</div>
</section>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script>
const hamburger = document.querySelector(".icon");
const container = document.querySelector(".container");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
container.classList.toggle("active");
});
</script>
</body>
</html>
index.html

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
overflow: hidden;
}
.container {
padding: 100px;
position: absolute;
right: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
background-color: #222;
color: white;
transition: right 500ms ease-in-out;
}
.container.active {
right: 300px;
}
header img,
.icon {
width: 40px;
height: 40px;
}
header .logo {
display: flex;
align-items: center;
}
header .logo span {
color: white;
font-size: 1.4rem;
font-weight: 700;
}
header .icon img {
background: rgba(0, 0, 0, 0.7);
padding: 5px;
border-radius: 10px;
}
header .icon {
position: relative;
cursor: pointer;
background: url("./assets/burger.svg");
background-size: 30px;
background-repeat: no-repeat;
}
header .icon.active {
background: url("./assets/close.svg");
background-size: 25px;
background-repeat: no-repeat;
}
.container header {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
padding: 20px 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #3702f7, #42c2ff);
mix-blend-mode: overlay;
}
.container .text {
position: absolute;
z-index: 10;
text-align: center;
color: white;
}
.text h1 {
font-size: 5.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.text p {
font-size: 1.4rem;
width: 70%;
margin: 0 auto;
}
.text a {
position: relative;
display: inline-block;
padding: 10px 40px;
background-color: white;
border-radius: 20px;
text-decoration: none;
color: black;
font-weight: 500;
margin-top: 2rem;
}
.text a::after {
content: "";
position: absolute;
top: -12%;
left: -3%;
width: 105%;
height: 120%;
border: 1px solid white;
border-radius: 20px;
}
@media (max-width: 1200px) {
.text h1 {
font-size: 5rem;
}
.text p {
font-size: 1.2rem;
}
}
@media (max-width: 996px) {
.text h1 {
font-size: 4rem;
}
.text p {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.text h1 {
font-size: 3rem;
}
.text p {
font-size: 16px;
}
.container header {
padding: 10px 40px;
}
.container {
padding: 40px;
}
}
@media (max-width: 567px) {
.text h1 {
font-size: 2rem;
}
.text p {
font-size: 15px;
width: 90%;
}
.container header {
padding: 10px;
}
.container {
padding: 10px;
}
.text a {
padding: 10px 20px;
outline-offset: 5px;
text-decoration: none;
}
header img {
width: 30px;
height: 30px;
}
}
.menu {
position: absolute;
right: -300px;
background-color: white;
width: 300px;
height: 100%;
padding: 20px;
transition: right 500ms ease-in-out;
}
.container.active + .menu {
right: 0;
}
.menu ul {
position: relative;
list-style-type: none;
}
.menu a {
display: inline-block;
padding: 10px 0;
text-decoration: none;
color: #222;
}
style.css

Video

If you face errors/problems while copying and pasting the various code snippets then download the source code from the button below.

Github link

Download Code Files

0 COMMENTS

Congratulations, you have the opportunity to be the first commenter on this article. Have a question or suggestion? Please leave a comment to start the discussion.

LEAVE A REPLY