Modern Hero Areas with HTML5 videos

A common trend in today’s webdesign is having a background video in the hero area of your site, instead of an image. A good video is an ideal way to add interest to your site or product.
In the old days, you would add a video by using third party plug-ins (like Flash), but now we can use HTML 5.

In this lesson you’ll learn how to create a full video background and how to easily control the video playback.

Adding a video is really easy thanks to the HTML5 video tag. The browser compatibility is really good and all modern browsers including IE9 can render background videos correctly. You can see a complete browser support list on Wikipedia.

There are currently 3 types of videos you can embed: MP4, WebM and OGG. To offer the best user experience, I recommend using MP4 and WebM. I prefer WebM to Ogg format, since it was specially created to be used in the video tag, is backed by Google and is supported by many browsers.

When embedding a video, we have to at least specify 2 attributes: the source and the type. We can also add a message to alert the user that his browser can’t render videos properly:

Without further ado, let’s start our project!
Here’s the layout we’ll be building using HTML, CSS and a little bit of JavaScript:

Video Background Tutorial - homepage

Download source files View Demo

1. Project structure and set-up

Start by creating the main project folder. Inside this folder add 3 new folders and create an index.html file. The assets folder will hold our videos, and the CSS and JS folders will be used for our stylesheet and JavaScript.
01 - project structure

Download normalize.css to make sure that we’ll have a consistent look in all the browsers. Please note that this file is only needed for the layout, you don’t need it if you only want to learn how to use background videos!

In the index.html, add the title and link the css and js.

2. HTML Hero video

Now that we have our HTML skeleton ready, we can add our clip. You can add your own video, or use one from a free stock site. You can read more about free stock video sites in our Ultimate list of free resources. I chose a clip from Coverr. Add the videos to the assets folder.

I added the video attributes autoplay and loop to make sure that the clip will start when the page is loaded and that it will run in a continuous loop. I’ve also added the mute attribute so that the video will play without sound.

The hero-text divider is used to display a welcome message and a CTA button over the video. The more link will be displayed as a button, so that the user will know that there is more content under the video.

3. Hero video CSS

min-height: 100vh; will make sure that the content will always span the entire browser height, thus making our container full screen.

The hero-content div will be absolutely positioned with respect to the .hero divider. overflow: hidden; property is used to get rid of any scroll bars that might appear and hide content greater than the container.

If the video will not be displayed, due to bandwidth constraints or browser incompatibility, we’ll display an image instead. We make sure that the image will not repeat. By using background-size: cover; it will scale to fit all screen resolutions.

To center our video we have to absolutely position it and align it 50% from top and left and then translate it back 50%. Having the value set to auto, the width and height will be automatically calculated by the browser and with the min-width and min-height set to 100%, the browser will display minimum 100% of the video. Setting the z-index to a negative value will allow us to place other elements, like a welcome message, on top of the video.

4. Hero text CSS

Our video is full screen and scales with the screen size. We can now add a welcome message over the video.

Setting left to 50% will fix the centering bug for Chrome browser. Without this property our content would look like this:

Chrome bug
Chrome bug

After writing all the markup and adding some styles, the hero area should look like this:

Final hero area

5. Dummy content HTML

Let’s add some dummy content for our fictional site. I used some text from Fillerati. To center the content add a wrapper div and place the new dummy content inside.

6. Dummy content CSS

To center the content inside out wrapper div, set the margins like this: margin: 0 auto. Then add some minimal styles lice paddings, margins and headings and text colors.

05 - about section
The styled dummy text content

7. Testimonials Area HTML

We can now start working at our testimonials area. We’ll use another video from Coverr and display some “testimonials” over the video. A thing to consider is that some users might have difficulties reading text on top of a dynamic video background, so I added a Pause/Play button to control the playback.

Add the following code right after the About section:

As you can see, I used a similar HTML markup to the Hero section: in the video tag we have our video, and the testimonial text is a blockquote placed inside a div with a class of overlay.
To control the playback, I used a button tag with a pause button font from Font Awesome.

8. Testimonials Area CSS

As you can see, the CSS is minimal and is used to position the video and style the blockquote. We used similar techniques like the ones in the Hero section CSS.

9. Testimonials Area JavaScript

To add playback control, we have to use a little bit of JavaScript magic.

First, we identify the video and the button we want to target by using the JavaScript getElementById method to search the DOM. We add and event listener to our play button variable, so when the user clicks, the code in the if/else block will run.

The finished testimonials area

10. Footer section

In the footer section, I placed the links to the awesome resources used in this tutorial and a copyright information.
The HTML markup and CSS are really simple:

11. Media queries

To make sure that the site looks good on various screen resolutions, we have to use some media queries to style the content.

At 960px reduce the width of the hero text paragraph, so it will better fit the layout and at 730px decrease the blockquote width.

At 630px we have to do some work to improve the layout. Decrease the hero text font size and padding around the CTA button. Also, set the blockquote font size to 12px amd hide the second part of the quote.

At 400px, I decided to hide the playback buttons, as there was no more screen real estate to accommodate the button.


Embedding background videos in your site is pretty easy thanks to the video and with some minimal CSS you can create fullscreen videos.
I hope you enjoyed reading this tutorial and if you have any comments or suggestions, use the form bellow to get in touch.

Further reading

HTML5 Video Jumpstart With Examples
Create Fullscreen HTML5 Page Background Video

Tags: , ,

Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *