Add Movement to Your Landing Page with Videos

Christian Nwamba

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.

Prerequisite

  1. Basic knowledge of HTML and CSS
  2. A text Editor

Creating the HTML file

First, we need to create our index.html file, after which we start writing our HTML code. For that, paste the code below.

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Video Background</title>
8 </head>
9 <body>
10
11 </body>
12</html>

Add Video To HTML File

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.

1<video autoplay muted loop id="videoBg">
2 <source src="congrats.mp4" type="video/mp4" />
3</video>

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.

Adding Styling to the Video

1****
2<style>
3/* make sure everything is within the body tag */
4* {
5 box-sizing: border-box;
6 }
7
8/* make sure there's no external margin or padding affecting the page apart the one you set and also set font family */
9body {
10 padding: 0;
11 margin: 0;
12 font-family: Verdana, Geneva, Tahoma, sans-serif;
13}
14/* 100% width and height to cover the entire window */
15#videoBg {
16 position: fixed;
17 right: 0;
18 bottom: 0;
19 min-width: 100%;
20 min-height: 100%;
21}
22
23</style>

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.

Adding Overlay Content

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.

1<div id="overlay">
2 <div class="content">
3 <h1>Heading</h1>
4 <p>
5 People's relationship with work has started to change. The view on
6 fixed work spaces and workers needing to gather under the same office
7 roof – something that has been considered the norm since the
8 Industrial Revolution – has started to change.
9 </p>
10 <button>NEWS</button>
11 </div>
12</div>

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.

Styling Overlay Content

To style the contents on top of the video, paste the below code into the style tag.

1<style>
2/* content below the vidoe */
3.content {
4 position: absolute;
5 top: 0;
6 background: rgba(139, 21, 21, 0.5);
7 color: #f1f1f1;
8 width: 100%;
9 padding: 20px;
10 text-align: center;
11}
12
13button{
14 background-color: #008CBA; /* Green */
15 border: none;
16 color: white;
17 padding: 15px 32px;
18 text-align: center;
19 text-decoration: none;
20 display: inline-block;
21 font-size: 16px;
22}
23
24#overlay {
25 position: fixed;
26 width: 100%;
27 height: 100%;
28 top: 0;
29 left: 0;
30 right: 0;
31 bottom: 0;
32 background-color: rgba(0,0,0,0.5);
33 z-index: 2;
34 cursor: pointer;
35}
36</style>

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.

Conclusion

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.

Christian Nwamba

Developer Advocate at AWS

A software engineer and developer advocate. I love to research and talk about web technologies and how to delight customers with them.