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:
|
1 2 3 4 5 6 |
<video> <source src="path_to_video/video.webm" type="video/webm"/> <source src="path_to_video/video.mp4" type="video/mp4"/> <source src="path_to_video/video.ogv" type="video/ogg"/> Your browser does not support the HTML5 video tag. </video> |
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:
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <!-- title and meta --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Video Background Tutorial</title> <!-- css --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> </head> <body> <!-- js --> <script src="js/custom.js"></script> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="hero"> <div class="hero-content"> <video autoplay loop muted class="hero-video"> <source src="assets/Strum-Away.webm" type="video/webm"/> <source src="assets/Strum-Away.mp4" type="video/mp4"/> Your browser does not support the HTML5 video tag. </video> <div class="hero-text"> <h1>John Doe</h1> <p>The best guitar teacher on the web!</p> <a href="#">Let's learn together</a> </div><!-- end hero-text--> <a href="#intro" class="more round-btn"><i class="fa fa-chevron-down"></i></a> </div><!--end hero content--> </div><!--end hero --> |
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
|
1 2 3 4 5 6 7 |
/*========== HERO STYLES ==========*/ .hero { position: relative; min-height: 100vh; margin-bottom: 48px; } |
min-height: 100vh; will make sure that the content will always span the entire browser height, thus making our container full screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.hero-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; background: url(../assets/Strum-Away.jpg) no-repeat 50% 50%; background-size: cover; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); overflow: hidden; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*========== HERO TEXT CONTENT STYLES ==========*/ .hero-text { position: absolute; /*position: relative; is the standard, but chrome gets confused?*/ top: 50%; left: 50%; /*chrome fix, even old IE 11 works without this fix*/ transform: translateY(-50%) translateX(-50%); /*add translateX(-50%); as a fix for chrome*/ width: 100%; max-width: 1000px; margin: 0 auto; padding-left: 24px; padding-right: 24px; text-align: center; text-transform: uppercase; color: #fff; } |
Setting left to 50% will fix the centering bug for Chrome browser. Without this property our content would look like this:
After writing all the markup and adding some styles, the hero area should look like this:
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="wrapper"> <section> <h2 id="intro">About <span>John Doe</span></h2> <p> At eleven in the morning the train had reached the dividing ridge of the waters at Bridger Pass, seven thousand five hundred and twenty-four feet above the level of the sea, one of the highest points attained by the track in crossing the Rocky Mountains. After going about two hundred miles, the travellers at last found themselves on one of those vast plains which extend to the Atlantic, and which nature has made so propitious for laying the iron road. </p> <p> On the declivity of the Atlantic basin the first streams, branches of the North Platte River, already appeared. The whole northern and eastern horizon was bounded by the immense semi-circular curtain which is formed by the southern portion of the Rocky Mountains, the highest being Laramie Peak. Between this and the railway extended vast plains, plentifully irrigated. On the right rose the lower spurs of the mountainous mass which extends southward to the sources of the Arkansas River, one of the great tributaries of the Missouri. </p> </section> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*========== ADDITIONAL SITE CONTENT STYLES ==========*/ .wrapper { width: 100%; max-width: 1200px; padding: 0 24px; margin: 0 auto; color: #808080; line-height: 1.5; } section { margin-bottom: 48px; } section h2 { text-align: center; text-transform: uppercase; margin-bottom: 24px; } section h2 span { color: #2196F3; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<section id="testimonials"> <h2>Student <span>Testimonials</span></h2> <div class="video-overlay"> <video id="small-video" autoplay loop muted > <source src="assets/For_Wes.webm" type="video/webm"/> <source src="assets/For_Wes.mp4" type="video/mp4"/> Your browser does not support the HTML5 video tag. </video> <div class="overlay"> <blockquote> <p>At half-past twelve the travellers caught sight for an instant of Fort Halleck, which commands that section; and in a few more hours the Rocky Mountains were crossed. <span>There was reason to hope, then, that no accident would mark the journey through this difficult country. The snow had ceased falling, and the air became crisp and cold. Large birds, frightened by the locomotive, rose and flew off in the distance. No wild beast appeared on the plain. It was a desert in its vast nakedness.</span></p> <footer><cite>Jules Verne</cite></footer> </blockquote> <button id="play-btn" class="round-btn"><i class="fa fa-pause"></i></button> </div><!--end overlay--> </div><!--end video-overlay--> </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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*========== SMALL VIDEO WITH OVERLAY STYLES ==========*/ .video-overlay { position: relative; } #small-video { width: 100%; height: auto; background: url(../assets/For_Wes.jpg) no-repeat 50% 50%; background-size: cover; } #play-btn { position: absolute; bottom: 36px; right: 36px; background: transparent; } .overlay { position: absolute; top:0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); overflow: hidden; } .overlay blockquote { color: white; width: 50%; margin: 0 auto; font-style: italic; position: relative; top: 50%; transform: translateY(-50%); } .overlay blockquote cite { color: #2196F3; text-transform: uppercase; font-size: 18px; font-style: normal; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(function() { var video = document.getElementById("small-video"), play = document.getElementById("play-btn"); play.addEventListener( "click", function(e) { e.preventDefault(); if (video.paused) { video.play(); play.innerHTML = "<i class='fa fa-pause'></i>"; } else { video.pause(); play.innerHTML = "<i class='fa fa-play'></i>"; } }); })(); |
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.
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:
|
1 2 3 4 5 6 7 |
<footer class="site-footer"> <p>Videos provided by <a href="http://coverr.co/">Coverr</a></p> <p>Placeholder text provided by <a href="http://www.fillerati.com/">Fillerati</a></p> <p class="copyright"> Copyright © 2015 <a href="http://acasaprogramming.ro/">AcasA Programming</a> </p> </footer> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*========== SITE FOOTER ==========*/ .site-footer { background-color: #232323; padding-top: 12px; text-align: center; color: white; } .site-footer a { color: #2196F3; text-decoration: none; transition: all .3s ease-in-out; } .site-footer a:hover { color: #1976D2; } .site-footer .copyright { background-color: #1c1c1c; margin-bottom: 0; margin-top: 24px; padding: 12px 0; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/*========== MEDIA QUERIES ==========*/ @media (max-width: 960px) { .hero-text p { width: 90%; } } @media (max-width: 730px) { .overlay blockquote { width: 70%; } } @media (max-width: 630px) { .hero-text h1 { font-size: 36px; } .hero-text p { font-size: 16px; } .hero-text a { padding: 8px 12px; } .overlay blockquote { width: 100%; padding: 0 24px; font-size: 12px; } .overlay blockquote span { display: none; } .overlay blockquote cite { font-size: 14px; } } @media (max-width: 400px) { #play-btn { display: none; } } |
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.
Conclusion
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
Nice one.