Creating a Video Background

Last Updated March 21, 2017

Putting Background Video on your Website

It seems like background video is all the rage. — or maybe it’s on the way out? Regardless, how do you do it? What are the best methods for file compression? and loading?

It’s really not as hard as you might initially think. It just has that cloud of unknown hovering over it. So, let’s shed a little light on the subject.

What’s the Point?

I feel like I some sort of obligation to the theology and purpose behind use of video. I’m only doing my due diligence.

If you have a client (or maybe it’s you!) that wants to add some background video, I would challenge you to first ask, “Is it really necessary?” What’s the purpose?

I recently redid the homepage for a company that provides all the metal for dental work.

The process of what they do is nothing short of amazing! They use 3D scanners and printers to manufacture their product. These machines are fascinating! They do all kinds of 3D renderings for their product beforehand to get approval ahead of time to make sure everything looks OK and lines up as it needs to.

How do you showcase that? That’s the story! That’s why people buy from them over someone else: their process, their workflow, their employees and the relationships that they build with their customers. That’s the difference.

That is harder to sell in a static image. But, it’s really easy to demonstrate in a background video. So, that’s what we did.

Doing the Work

The Actual Files

You need three different files to make everything work:

  1. The video file in .mp4 format
  2. The video file in a .webm format
  3. Fallback image

Historically, the .webm file was used for Firefox, and the .mp4 was for all other browsers. But, now-a-days, .webm is default. As the file extensions suggests, it’s video for the web (web movie).

There’s also a third format you can use: .ogg. Opera advocates this format. – Honestly, I usually don’t bother. (Sorry, Opera!)

The fallback image will be displayed as the video file is downloading and buffering in the background. You can take two different approaches here: (1) a great image that communicates your point if no video is ever loaded, or (2) a screenshot of the first frame of the video, so that when the video does play everything appears to be seamless.

At first glance, option two sounds like the ideal solution, but just remember, the first frame isn’t always flattering — and if your video fades in (from black or white) — well, then, that’s a no go, too.

Regardless of what solution you decide to use, I would recommend making the background image the same size dimensions as your video.

Compressing the .mp4 file

I have Adobe Media Encoder on my computer. It’s great because it works well with After Effects and Premiere (Adobe’s video software suite). The only problem is (the obvious) you might not have Creative Cloud and there are so many options to encode an .mp4, it can be overwhelming trying to determine what the best settings are. Besides, who doesn’t prefer cheap and easy?!

I would recommend downloading Handbrake, it’s free. I’ve used it before to rip DVDs, but it’s also great for compressing video files. Hey-O!

Download the app, unzip, install, and launch. Then, drop your (large) video file in.

Handbrake - Load Video

Under Preset, Format select MP4 from the dropdown menu. Make sure the Web optimized checkbox is checked.

All the other settings should be fine. Click Start in the toolbar.

Handbrake - Start Compression

Easy Peasy, right?

Compressing the .webm file

Unfortunately, .webm is a litte harder to account for. The easiest solution I’ve found is to download another free app, called VLC Media Player. It’s an “open source cross-platform multimedia player and framework that plays most media files.”

Same as before, download the app, unzip, install, and launch.

Within the main menu options, go to File > Convert / Stream. Another window will appear where you can drag and drop your media file.

VLC - Drag and Drop Video

I would recommend using the large video file, again. Sometimes compression and file conversions do weird things when you’re compressing based on a file that’s already been optimized and compressed.

Under the Choose Profile section, select Video – VP80 + Vorbis (Webm).

VLC - Convert Video

In the Choose Destination section, click the Save File As button.

Then, click the Browse button to choose where you want the video to save.

Click the Save button.

The video will start converting. One thing that wasn’t immediately obvious to me was the video’s progress. But, you may have noticed, once you hit the Save button, the Library window appeared with your video listed in the Playlist.

At the bottom of the window is a play bar. You should notice it slowly moves to the right as your video encodes. — That’s the progress bar.

VLC - Video Conversion In Progress

Perfect.

Storing your Video Files

So, where do these files go? Placing them on your server somehwere convenient is the obvious (and probably easiest) answer, but I would challenge you to consider opening an Amazon S3 account and placing them there. Not only is Amazon S3 cheap, but it will also offload some of the work from your server, preventing it from being bogged down. Plus, this is really the type of thing Amazon S3 is designed for! — In fact, did you know Netflix actually keeps their video files on Amazon S3?! Crazy.

The HTML

Before we start writing code, let’s look at a design comp of what we’re trying to achieve.

Homepage with Video Background

We have a video, with text overlaid, including a call to action button. It seems easy enough. But, let’s talk through some small caveats.

Text on top of video

You could just make the text part of the video. But, if you ever wanted to change the text, you’d have to re-export and re-compress the video file. = Yuck!

Plus, the text could be pixelated — and just to pile on, who knows how that text will be displayed on multiple devices? You want to control over that! Responsive all the way!

Better to keep the video file separate and use HTML text.

Legibility

It is possible to create an overlay in HTML. The nice side effect is that the color can easily be modified and adjusted. Heck, it could even be dynamic. When I tried to do this, though, I ran into issues with Internet Explorer. I tried using a blend mode on the background. It ended up just showing a solid color background, with no video at all. = No bueno.

I would recommend including the overlay inside the video, then you have nothing to worry about.

Layering the Content, the Actual Code

OK! Layer up!

Let’s start with a wrapping div.

<div class="hero">
</div>

First, let’s focus on the HTML.

Inside, we’ll want two containers, one for our video and one for our content.

<div class="hero">
	<div class="hero__video">
		<!-- VIDEO -->
	</div>
	
	<div class="hero__content">
		<h1>Headline</h1>
		<h2>Subheading Content</h2>
		<a href="#" class="hero__button">Click me!</a>
	</div>
</div>

For the video HTML, I wanted to draw special attention to the actual video code. We’ll be using HTML5 video tag to make this nice and easy:

<video autoplay loop class="hero-video">
    <source src="https://s3.amazonaws.com/argen-public-files/videos/argen-homepage-video.webm" type="video/webm">
    <source src="https://s3.amazonaws.com/argen-public-files/videos/argen-homepage-video.mp4" type="video/mp4">
</video>

On the <video> tag, the autoplay attribute forces the video to immediately play. We’re looping the video and we’ve added a class name of hero-video so we can hook onto it within our CSS.

Nested inside is a <source> element, which allows us to specify all the video files that the browser can choose from. You’ll notice it includes a src and type attribute.

The browser will use the first recognized file format.

NOTE:

Looking for additional documentation on the HTML5 Video element? W3Schools is a great place to start.

The main attribute I want to point out that’s not used in our example is the controls attribute. It gets added to the <video> tag if you want to display video controls, like play, pause, and volume. — Obviously, this is unnecessary for background video.

Awesome! So, altogether now:

<div class="hero">
	<div class="hero__video">
		<video autoplay loop class="hero-video">
			<source src="https://s3.amazonaws.com/argen-public-files/videos/argen-homepage-video.webm" type="video/webm">
			<source src="https://s3.amazonaws.com/argen-public-files/videos/argen-homepage-video.mp4" type="video/mp4">
			</video>
	</div>
	
	<div class="hero__content">
		<h1>Headline</h1>
		<h2>Subheading Content</h2>
		<a href="#" class="hero__button">Click me!</a>
	</div>
</div>

If you look at what we have within the browser, hopefully you’ll see your video, automatically playing, followed by the content below. Now, let’s add some styles and make it “pretty.”

The text content is pretty easy, so let’s go ahead and get it otu the way.

With CSS, we’ll position the content on top of the video:

.hero__content {
	align-ceontent: center;
	bottom: 0;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 3;
}

I used flexbox in order to get the content to center horizontally and vertically. — Flexbox is awesome and easy, like that.

Of course, we can add additional (standard) styles to h1, h2, a tags to format the text.

.hero__content h1 {
		font-family: sans-serif;
		font-weight: bold;
		font-size: 50px;
}

.hero__content h2 {
		font-family: sans-serif;
		font-weight: normal;
		font-size: 18px;
}

.hero__content a {
		background: magenta;
		border-radius: 3px;
		display: inline-block;
		font-family: sans-serif;
		font-weight: bold;
		font-size: 18px;
		padding: 15px 30px;
}

Now, for the video.

Within our CSS we want the video to be full width. (duoh) The trick here is making sure it fills the screen, but also scales with the browser window. When I’m doing this with background images, my favorite trick is background-size: cover;

I’ll show you with the fallback image:

.hero__video {
		background: url('video-fallback.jpg') center center no-repeat;
		background-size: cover;
		display: block;
		height: 100%;
		width: 100%;
		z-index: 1;
}

background-size: cover; makes the background image cover the area regardless of the dimensions. This method is so much easier to implement than trying to work around the background-size: 100% auto; or background-size: auto 100%;. Depending on what device you’re using, auto can create some undesired effects.

While this works for background images, it won’t work for the video. Before you throw your computer across the room, let me introduce you to another property that is equally as powerful: object-fit and works very similarly.

Object-fit is intended for images, videos, and other embeddable media. (Reference CSS-Tricks). Plus, you can use it in conjunction with object-position, allowing to make sure the video (or image) is vertically and horizontally centered.

.hero__video video {
	object-fit: cover;
	height: 100%;
	object-position: center center;
	width: 100%;
	z-index: 2;
}

Before we call it a day, I do want to mention one small caveat. Internet Explorer and Edge still doesn’t like (COUGH recognize) object-fit and object-position.

Can I Use?

What work arounds is available? How do we target Internet Explorer and Edge?

Modernizr is a great JavaScript library that tells you what features your browser supports when it comes to HTML, CSS, and JavaScript.

In JavaScript, use the following snippet:

if ( ! Modernizr.objectfit ) {
  $('.hero').find('video').addClass('workaround');
}

NOTE:

You may have noticed, I’m using jQuery in my code.

Our JavasScript is pretty straightforward. It says, “If Modernizr says that objectfit doesn’t exist, then find the video div, nested in the .hero div, and add the class workaround.

Modernizr.objectfit is a property that Modernizr gives us.

The other pieces, like the video div wrapper .hero, and the class that we add, workaround can all be customized to meet your specific needs.

Now, within our CSS, we can use the workaround class, knowing that it will only be applied to an element when the browser doesn’t support object-fit.

.workaround {
		background-size: auto 100%;
		background-position: center center;
}

As I mentioned earlier there are some drawbacks to background-size that will need to be tested, but at least now you’re only dealing with those caveats in one browser instead of across the board.

You made it. Woo hoo!


The Conversation