Designing and structuring our website depends on the type of business, some businesses require little graphical application, and some require more. In this tutorial, we will be showing how we can add a video to our landing page using basic HTML and CSS like the one below.
- Basic knowledge of HTML and CSS
- A text Editor
First, we need to create our index.html file, after which we start writing our HTML code. For that, paste the code below.
<!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" />
<title>Video Background</title>
</head>
<body>
</body>
</html>
Code language: HTML, XML (xml)After creating the index.html file, next is to add the video to the body tag.
Paste the code snippet below in the body tag.
<video autoplay muted loop id="videoBg">
<source src="congrats.mp4" type="video/mp4" />
</video>
Code language: HTML, XML (xml)We used the video tag to display our background video, adding some attributes as mentioned below,
autoplay: this HTML attribute plays the video automatically as the page renders. muted: this attribute mutes all audio sounds of the video. loop: it allows for a continuous play of the video.
****
<style>
/* make sure everything is within the body tag */
* {
box-sizing: border-box;
}
/* make sure there's no external margin or padding affecting the page apart the one you set and also set font family */
body {
padding: 0;
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* 100% width and height to cover the entire window */
#videoBg {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
</style>
Code language: HTML, XML (xml)First, we give the body tag some padding, margin, and font family to look appealing. We then styled the videoBg id as stated above.
The videoBg id: this style is focused on the video. We assign a fixed position with a right, left of 0 to center the video, then a minimum and maximum width.
Now that we have our video displayed, the next is to add overlaying content to the video. To do that, paste the code below into the body tag.
<div id="overlay">
<div class="content">
<h1>Heading</h1>
<p>
People's relationship with work has started to change. The view on
fixed work spaces and workers needing to gather under the same office
roof – something that has been considered the norm since the
Industrial Revolution – has started to change.
</p>
<button>NEWS</button>
</div>
</div>
Code language: HTML, XML (xml)We defined another section using the div tag; the above contains the text on top of the video, with a class and id to style the contents.
To style the contents on top of the video, paste the below code into the style tag.
<style>
/* content below the vidoe */
.content {
position: absolute;
top: 0;
background: rgba(139, 21, 21, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
text-align: center;
}
button{
background-color: #008CBA; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
</style>
Code language: HTML, XML (xml)The content class: this style is for the text on top of the video. We assign an absolute position to the text to make it on top of the video, then some other styling like background color for visibility, padding, and text center to center the text.
The overlay id: This style is to insert an overlay for our header, making sure text will be visible.
These styles allow us to have an appealing video background on the header of our application. There are several ways of achieving such implementations, some with much CSS while others with less, just as we demonstrated with minimum CSS.
Implementing video background will now be a thing of the past, as we have shown in this tutorial how easy it is to implement that without Javascript. Source codes are available on codesandbox.
