How to Embed a Hero Background Video on Your Homepage

Learn how to use a video background in your site’s hero section & why it can greatly increase conversion rates for your business.

How to embed a hero video background

It's no secret that videos are incredibly effective in promoting audience engagement on the web. People respond to and remember visuals at a staggeringly higher rate than when the same information is presented through words. Our brains simply process images faster—not to mention the experience of watching a video is fun, exciting, and – quite frankly, addicting. Audiences share an insatiable hunger for consuming video content, which is why it's projected that within two years 80% of all web traffic will be tied to video!

It's not just words that are experiencing a great purge. Modern web design is seeing a huge push towards replacing still images with more dynamic visuals. Gone are the days when static web pages of text and photos were enough to satisfy user engagement. Video is where it's at—and it is now time to ask yourself if its absence on your website can continue to be ignored.

Perhaps the main reason you've yet to embrace the format is due to its perceived technical complexities. While there may be some additional prep and optimization required to get videos onto your website, the process has been made sufficiently easier in the last few years with various plugins and HTML5.

For help in understanding how to embed videos on your website, this guide is here to show you what you need to know in order to create a compelling visual experience that users won't soon forget.

The “Hero” Background Video

When we speak of embedding videos on your website, we're not just talking about any type of video placed in any random spot. This article is specifically about utilizing a popular and effective trend in web design called the hero background video.

Here's an example:

Example of the motion and adventure a video background can acheive
Here's a good example using a hero background video. As you can see, the video provides a sense of motion and adventure for this bicycle shop that still photographs just couldn't achieve.

We've previously mentioned the concept of using hero images in the “above the fold” area of your web page. For the uninitiated, a hero image (or sometimes called banner) is often the first thing people see when arriving at your site, where its most important content is presented in a concise and visually striking manner. This primary section typically fills the entire screen's width and height with a sleek background image, leaving plenty of open space around a critical call to action button or link.

The same concept applies here, except obviously now we're replacing the background image with a video. This may at first seem like a relatively insignificant change: Okay, so we used to have a photo of a person riding a bicycle, but now we have a video of the bicycle in action and being taken for a ride—big whoop, right?

Well, it turns out that watching a simple moment in motion can create a tremendous impact on how users will perceive and engage with your brand. Videos inspire emotion and action faster than any other medium. If conversion is your main objective, then a background video could be the secret sauce to a successful website.

Why Use a Background Video?

There is overwhelming evidence that illustrates just how powerful videos can be for a business. Here are some tantalizing statistics shared by Forbes that should serve as motivation:

  • Embedding a hero background video on your landing page can boost conversion rates by 80%
  • Product videos help influence 90% of customers when making a purchasing decision
  • 64% of customers are more likely to buy a product online after watching a video about it.
  • Digital marketing expert James McQuivey estimates that a single minute of video content is worth 1.8 million words.
Example of a hero background video
Would you prefer to see the National Parks, or would you rather experience them?

So now that we've established why video content is so important, let's finally see how to get these darn things up on your website!

Embedding Background Videos on Your Website

It's true that there are many file formats to choose from, different levels of browser support, and varying methods to embed videos on a web page—but I'm going to simplify this as much as possible and just tell you only the most pertinent information, step by step, to achieve maximum compatibility for all possible users.

Self-Hosting Your Video Vs. Using a Hosting Service

The first thing you'll need to determine is where the video files will actually reside: on your website's own server (in other words, your own web hosting account) or on a video hosting platform like YouTube or Vimeo.

Some advantages of self-hosting video include having a greater freedom with how it's embedded, easier implementation in making the video full screen, and more control in protecting the video behind a monetization portal (hiring a skilled back-end developer would be required for this).

Some advantages of video platforms include slightly easier embedding, usage of fast world-class servers (which lightens the bandwidth on your own server) optimized specifically for video files, and more widespread sharing ability.

Ordinarily, for general-purpose videos on a website I would recommend the ease of using a video platform to serve your content, especially if your site is on a shared hosting plan. However, the specifics of a background hero video require certain settings that lend themselves better to self-hosting. You may have your reasons for using either method, so I will provide instruction for both.

Method 1: Self-hosting

First, the video needs to exist on your server. We'll discuss what type of video file you need in a bit—but for now, just like adding images, you will need to use an FTP program to upload your video file to your server.

Now we will insert the correct code into your web page to serve the magic. HTML5 allows usage of the <video> tag, which thankfully replaces Flash as the preferred web format for videos. Here's what we need to create a proper full screen background video:

HTML

<div id="hero">
<video playsinline autoplay muted loop poster="placeholder.jpg" id="bgvideo" width="x" height="y">
<source src="path/to/myvideo.mp4" type="video/mp4">
</video>
</div>

CSS

video#bgvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(placeholder.jpg) no-repeat;
background-size: cover;
}

There's quite a bit going on here, so let's take a look at what these settings mean.

playsinline

This keeps the video within the browser and alongside your content, which is important for preventing it going truly full screen where your entire screen is occupied by the video and nothing else.

autoplay

You'll most likely want the hero background video to play immediately once the page has loaded, without the need for hitting a “play” button. There are a couple issues with this for mobile users, though, which I'll talk about later.

muted

Unless your video contains essential information in its audio track, it is best to mute your background video. People have an extreme distaste for being greeted with unexpected audio while surfing the web, so it's better to turn off the sound than turn off your users.

loop

The choice to play your video on repeat should be made on a case-by-case basis. If you want a sense of finality where the video concludes with a clear call to action without distraction, then it would make sense to leave this setting out.

poster

Supplying an image file here will act as a placeholder until the video finishes loading and plays. It is up to your discretion what would be most appropriate to display, whether it's a still of the video's first frame, or something like a logo or banner.

Our CSS settings essentially instruct the browser to stretch the video across the page. Of note here is the background setting using our same poster image; this acts as a visual fallback in case an antiquated browser doesn't recognize the <video> property.

If you intend to display text or a call to action button over the background video, you can then add them as usual within the <hero> div.

Method 2: YouTube or Vimeo

Using this method will keep the video files off your site, where they instead live on dedicated servers that specialize in video content. Assuming you've already uploaded your video, you will now need the embed link. For YouTube this is found by hitting the “share” button on the video's page and then clicking “embed”. For Vimeo you will similarly click “share” and then copy the embed link shown on the popup window.

QUICK TIP: When using the “share” button, YouTube and Vimeo will also provide options for settings like autoplay, loop, and showing/hiding player controls. Make sure you don't miss these to easily adjust how your video is displayed. Vimeo may also require additional settings for it to work properly as a background video.

You may notice that these embed links are contained in an iframe tag, which behaves a bit differently than our HTML5 <video> element. In order for these videos to work as full screen backgrounds we'll need to do a little tweaking with our markup. Thanks to a method by Rishabh Aggarwal, there's a simple workaround for making this happen:

HTML

<div id="hero">
<div class="videoContainer">
<iframe class="videoContainer__video" width="x" height="y" src="url/to/video/embed" frameborder="0">
</iframe>
</div>
</div>

CSS

.videoContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero {
position: relative;
}
iframe {
/* optional */
width: 100%;
height: 100%;
}

Your YouTube or Vimeo upload should now behave as a functional background video behind your hero content.

Using WordPress

If you're using WordPress, there are a variety of video background plugins that can accomplish the above task without worrying about code. However, most of these are premium plugins which you may have to purchase.

Tips and Best Practices for Embedding Videos

Now that your video is successfully up and in action, let's dig a bit further into the intricacies of optimization, file size, and ensuring your hero background video looks and operates at its best.

Understanding File Type

I've said before that there are many options in video file types available, some of the most popular ones being mp4, ogg, and webm. Modern-day browsers almost universally accept mp4 as the prevailing format, so at the very least this is the file type you will need to include. However, it's usually a good idea to ensure that all users receive a similar experience, even if they're on outdated software; in which case, your markup will look similar to this:

<video playsinline autoplay muted loop poster="placeholder.jpg" id="bgvideo" width="x" height="y">
<source src="path/to/myvideo.ogg" type="video/ogg">
<source src="path/to/myvideo.webm" type="video/webm">
<source src="path/to/myvideo.mp4" type="video/mp4">
</video>

QUICK TIP: Insert your preferred file format last in the source list. This is what the browser will read last, and, if the user's device supports it, will be the one to load.

Another technicality to consider is what video codec to use, which is basically how the file is compressed and then interpreted by the browser's media player. The major codec you should be concerned with is H.264, which is what most browsers accept and what sites like YouTube and Vimeo support.

If all of this sounds like confusing jargon, don't worry. Chances are your video is already in the desired mp4/H.264 format. This is usually the file type you're given when downloading from a stock video site. If you need to convert a different file type over to mp4, then you'll need additional software to do so. Adobe Premiere Pro is the industry standard for working with videos, but this is understandably beyond most peoples' means. Luckily there is a free program for PC and Mac called HandBrake that should accomplish just what you need.

An example of a hero background video with audio
Samukawa-jinja Shrine creates a beautiful and soothing experience with video (and audio – but you'll see why in this case it's acceptable). Take note of the clever integration of video with their navigational menu.

Optimizing Your Video File

It's probably not a good idea to take your video as it currently stands and upload it straight to your website. Video files can be large—even 30 second clips if they're in high or ultra definition. Remember that your users have to download these files onto their browser before they're played, and waiting for a 50 megabyte video to load is not conducive to a great user experience.

You will need to tweak your video's resolution, bit rate, and length in order to hone in on an optimal file size. Check out this handy guide for a quick rundown on how to prepare videos for the web.

So how big is too big? It's generally considered that 5 megabytes is the maximum size for a background video, with file sizes less than 1 megabyte being the ideal. This can be quite tricky to achieve in order to strike a balance between quality and size. For starters, keep your resolution at around 720p or less for a good mix of clarity and economy. A sharp 4K video might look gorgeous, but bear in mind that most people browse the web on screens less than 15″, so the added resolution would just be superfluous.

In terms of length, an ideal runtime would be somewhere between 10–30 seconds. If it's too short, your video can feel trivial or, if it's looped, too repetitive. A video that's too long runs the risk of losing users' attention and hiking up file size.

Bit rate makes a significant impact on file size, and it is probably what you will spend most of your efforts tweaking. Finding the ideal number for your video is a process that's beyond the scope of this article, but YouTube and Vimeo provide guidelines on file optimization here and here respectively that should help steer you in the right direction.

Removing the Audio

As suggested earlier, muting your background video is the preferred UX practice. If there really is no reason for sound to play, you can actually go further than muting the video and remove the audio track completely from the file. Doing so will greatly cut down the file's size by getting rid of unnecessary data. This translates to less bandwidth on your server and faster loading for your users. HandBrake is a good option for easily removing audio tracks from files.

Autoplay and Mobile Devices

I mentioned that there was a small caveat with using the autoplay setting for mobile users. As a security precaution in order to prevent unwanted data usage, many mobile phones will refuse to autoplay videos on the web. This means that a Play button will be embedded as an overlay on top of your background video. Though this is a minor nuisance, the real irritation is that this overlay can potentially cover any links or content you've placed in your hero section. Doh!

It appears that the latest versions of iOS now support the autoplay feature, but many Android phones and other mobile operating systems are still spotty. Although complex JavaScript workarounds and browser hacks may resolve this issue, their reliability is inconsistent and not completely recommended. The best solution for the most consistent user experience may perhaps be using a media query to remove the video entirely on mobile devices and replacing it with your placeholder image. To do so, put this in your CSS file:

@media screen and (max-device-width: 768px) {
#hero {
background: url(placeholder.jpg) no-repeat;
background-size: cover;
}
#bgvideo {
display: none;
}
}

Contrast Text & Video

For the best visual experience, you want to make sure your text is legible and stands out from the video behind it. Using light text on a darker video or dark text on a lighter video will make sure your users don't miss the important content or call to action of your hero section.

Try to use videos that follow a certain color palette—even better if those colors match the style guide of your brand. A background video with too many colors may look out of place on your website or may be too distracting from the text above it.

An effective method to alter the visual tone of your video is to apply overlays and filters. This can be done through editing software like Adobe Premiere, or even on modern browsers through the CSS filter property. Try experimenting with color overlays, saturation, blur, and opacity to fine tune your video's aesthetic so that it matches your brand's style and doesn't distract from the text.

Hero background example with engaging editing
The FreshDesign agency uses engaging editing to convey an essence and character that is interesting to watch no matter how many times it loops. The color filter also contrasts nicely with the text and logo.

Where to Find Videos for Your Background

You are now ready to add an effective and perfectly optimized background video to your website… except, now you need the actual video! So where do you get one?

The easiest and least expensive solution is to purchase video content from one of the many stock footage websites out there. iStock, Shutterstock, Dissolve, Coverr and even Vimeo royalty free are great resources for acquiring professional-quality footage.

QUICK TIP: A word of caution when browsing stock footage. Don't use it just for the sake of using it. A video must add to your site's message and earn its reason to exist. Many stock videos look overly generic and bland, and their one-size-fits-all nature may do nothing to elevate or distinguish your website..

For the best results, you'll want to hire a creative agency or freelance videographer to provide you with custom-tailored footage that will truly engage users with the essence of your product or brand. I would suggest doing a Google search for agencies or production companies around your nearest metropolitan area and take a look at their portfolios. Get a proposal and price estimate from a few different ones to weigh your options. This will be the most expensive option though and can cost thousands just for a single video background.

Freelancing sites like Upwork or Fiverr may be more budget-friendly, but it's a bit of a crap shoot on what production values or liability they provide.

Conclusion

Everyone loves a good video. We seem to be suckers for them—we ravenously consume them on our televisions, computers, phones, tablets, at our desks, on our couches, in our cars, everywhere and anywhere we can watch them.

It's been said that 95% of the information on the web is written language. However, with current projections and trends the way they are, our Internet browsing experience may soon be overwhelmingly tied to video. This makes sense, given how vastly more effective videos are at inspiring action than words.

Although not every business or website needs a background video to convey its brand, there is a strong probability that one will help yours. Now that you know how to embed one onto your website, I encourage you to see just how far a hero background video will take your business.

 

About the author


  • Jason Beever uses the power of images and words to develop unmistakable brands for small businesses. With a degree in performing arts, a near lifetime’s experience with creative writing, and a passion for web design, Jason thrives on helping business owners speak to their clients through the magic of storytelling.

ADD A comment


Leave a Reply

The HTGO Newsletter

Get weekly emails on something REAL you can use or do to improve your website and grow your business online!

QUICK TIP: When running a newsletter for your business, it's best practice to implement a double opt-in (also known as confirmed opt-in). This is where a new email address is only added to your mailing list after the subscriber clicks a confirmation link. This helps to ensure the subscriber really wanted to join your newsletter and makes for a quality mailing list. So check your email and confirm your subscription!

Pin It on Pinterest