How to Create a Video Background with CSS

If you want to engage first-time visitors on your website, you have to do it fast. The data used to suggest you have around 10 to 20 seconds to capture your audience. As if that wasn't short enough, studies are now showing that number has gotten even smaller, with visitors' first impressions made in just 50 milliseconds.

Grabbing a user's attention right away is more crucial than ever, and one good way to do that is with video - specifically, by adding a background video to your site with CSS.

Table of Contents

• Why Add a Video Background to Your Website?
• How to Create a Fullscreen Video Background With CSS
• 17 Examples of Websites with Video Backgrounds

Why Add a Video Background to Your Website?

If you have concerns that adding a video to your website will affect the loading efficiency, it's a valid concern. About 40% of users leave a website if it takes more than three seconds to load - and you wouldn't want to risk that.

That being said, including videos on your landing pages can increase conversion rates by up to 80%. When watching a video, users are more inclined to pause their scrolling and give the content some more time. This gives you more natural possibilities to pique the audience's interest and encourage clicks.

One other consideration is hosting the video you'll use on your website. This is where I like to recommend HubSpot's Content Hub, which provides everything you need to make sure your website is at its peak performance.

Now, let's get into the specifics of video backgrounds.

Video backgrounds take up the entire width and height of the viewport (in other words, the visible page area) and add some visual flair to boost engagement. Over this video, you can place your featured page content - after all, it is just a background, and your content is most important.

Video backgrounds may seem like a fancy feature, but they're actually easy to implement if you know some CSS. In this post, I'll show you how to add a simple fullscreen video background to your webpage, which you can tweak and adapt to your needs. Then, for inspiration, I'll share some of my favorite sites that use video as background really well.

How to Create a Fullscreen Video Background With CSS

To show you how to create video backgrounds for your site, we'll share some code that you can copy to modify for your needs. We'll also see the code in action with some responsive video background CodePen modules.

Let's start with our HTML. First, we'll place a video on our page with the tag and several attributes.

All of these attributes are important for the background to work as intended, so let's go through each one.

• The id attribute is for styling our video element with CSS. This is necessary to achieve the fullscreen background effect.
• The autoplay attribute starts the video automatically once the page loads.
• The loop attribute plays the video in an infinite loop.
• The muted attribute turns off sound for the video. Generally, you shouldn't play video sound on your page unless the user turns on sound. Doing so is an accessibility issue and can make for an unpleasant user experience.
• Finally, the poster image is shown on the screen as the video is loading, or in place of the video if it doesn't load. We recommend making your poster image the first frame of your video for the smoothest look.

tags usually include the controls attribute as well. However, we've left it out because we don't want users pausing the video or skipping around.

After our video element, let's add some HTML filler content to see how text appears against our video background.

With the HTML done, let's handle the CSS business. To turn our normal video into a background video, add the following CSS:

Let's go through each of these rules to understand what they do:

• height: 100vw (viewport width) and width: 100vh (viewport height) make the video extend to the full width and height of the viewport.
• object-fit: cover automatically sizes the background video to keep its original aspect ratio while filling the screen, clipping out edges of the video when necessary.
• position: fixed and the following left, right, top, and bottom position the video relative to the viewport and separates it from the rest of the page content. This keeps the video in place when the user scrolls, and allows other content to sit on top of it.
• z-index places the video background under accompanying content.

Next, we'll add some styling for our other page content. For accessibility, make sure text placed over video provides ample color contrast with the background:

At this point, the video background will display nicely. But, we haven't accounted for mobile devices yet. It's usually a good idea to prevent auto-playing videos on mobile, since the data needed to play them is significant and users didn't request to play the video in the first place.

Instead, we'll add a media query that substitutes the video with our poster image on screens 750 pixels wide or smaller.

When we combine everything, we get a sleek video background that scales with the screen and displays an image on mobile devices. (Note:Click here to see the example with the video playing.)

See the Pen Video Background 1 by HubSpot (@hubspot) on CodePen.

If you need more help learning how to make this code work for your site, check out this CSS background YouTube video tutorial.

Add More Page Content

We've already put some headings on the page to see how content looks against a video background.

Still, your page will probably contain more content than a video background and some title text. So, let's add a section to our example that appears when the user scrolls down. This element will cover the video to bring the focus to your main content. (Note: Click here to see the example with the video playing.)

See the Pen Video Background 2 by HubSpot (@hubspot) on CodePen.

We've given our element a background color to cover up the video, as well as a top margin in viewport height units. This way, the main content will appear as soon as the user starts scrolling.

17 Examples of Websites with Video Backgrounds

When you come across an optimally functioning website with a video background, you can use it as a blueprint to spark ideas for your website.

Here are 17 websites that demonstrate how well video backgrounds can be used to enhance user experience.

1. GoPro

We all know what a GoPro does. It can capture excellent footage in challenging environments, which is why it's well-liked by outdoor enthusiasts, athletes, and content creators.

What I like: GoPro does a great marketing job by simply showing how people use their devices. They even have the price, model, and other details on the video with a clickable button that can guide their visitors to get the camera themselves. It's simple and no-fuss - that's it. As a visitor, you'll love seeing the camera in action, which gives the users an interactive point of view.

2. Accolade

For a healthcare advocacy website, Accolade promotes its message well. The site goes right into it by showing the visitors why Accolade should be their choice.

What I like: When you hit play, the video fills the screen. It's a lovely addition that enhances the watching experience without being intrusive. Moreover, you can click anywhere else on the page, which causes the video to resize automatically.

What stands out here is the addition of real-case stories for a human touch. The audience gets a sense of feeling cared for, and seeing how others are being treated creates trust and reliability, taking the experience up a notch.

3. Johnnie Walker

You wouldn't think of an alcohol company when you're looking for video background inspiration, but Johnnie Walker definitely upped their game with this visual masterwork.

What I like: The vibrant shades of blue and whiskey gold nod to the bottle they're promoting. Moreover, the art and sudden transitions capture a visitor's attention until the very end. The best thing about the background video from a visitor's point of view is the unexpected journey the visuals take you on. The mystery of the outcome is enough to keep anyone on their toes.

4. Rolex

You associate Rolex with luxury, class, and elegance, which the site's homepage oozes. There's no doubt why everyone wants a Rolex.

What I like: As you scroll the site, you can see short clips of each of their watches in crystal clear detail. The videos focus on one thing: the watches, which lure in buyers. Whether you're looking to buy or just browsing, the panning shots of the watch's appearance, make, and intricate details click with the target audience they're aiming for.

5. Brave People

We've already seen a few brilliant websites, but this one is slightly different. As a design agency, Brave People showcases its skills not only in real life but also on its homepage.

What I like: The short GIF-style videos are clickable and take you to case studies for each project they've done. This is an interesting way to move users along their website to learn more about their success stories. With the way Brave People have shown their artistic side and backed it up with their wins, it's no wonder that anyone looking for a design agency will immediately say it's their perfect match.

6. Big Production

With expertise in films, videos, and other cinematography projects, Big Production's homepage showcases its capabilities.

What I like: Their video carousel featuring their projects effectively shows their range of work. Moreover, once you hover over each video, you can preview the short clips as you do on YouTube, which allows you some insight into the film. With these interactive short videos and powerful visuals, visitors will surely have their attention captured as soon as they get on the website.

7. Films By Brett Johnson

Looking for a treat for the eyes? Well, Brett Johson's website is exactly that.

What I like: With stunning imagery and stills from his films, Brett Johnson creates the perfect website to showcase his creative journey as you scroll through the page. Each scroll leads you to a new film project or highlight, with the option to play a video.

8. Matter.to

Matter.to, a design and branding studio, has a unique and interactive approach with its homepage video.

What I like: The website video features a collection of randomly chosen videos with various backgrounds and scenes. The yellow dot - the dominant static element - contrasts with the moving images behind it, creating a dynamic and engaging experience that sets the site apart.

9. Eagleclean

Eagleclean is a cleaning service based out of London, England that totally breaks the mold with its use of website video (and humor).

What I Like: At first glance, the homepage seems like any other cleaning service website, focusing on its offered services. However, as you scroll down, you can find a video of a hand cleaning the screen, adding humor to the otherwise simple site. (The humor is also present in the visual wordplay of their logo and brand name.)

10. PastaMancini

Farm and pasta factory Pasta Mancini presents their entire brand, location, and mission by leveraging their website video.

What I like: Simple. To-the-point. Visually engaging. These three words describe PastaMancini's videos featuring their factory, pasta, and wheat fields. The videos show you their dedication to creating premium, all-natural products.

11. Dromoland Castle

The home page for Dromoland Castle, a sophisticated hotel and country estate in Ireland, showcases what it has to offer.

What I like: Using video on their homepage makes perfect sense for a hotel that wants to showcase their amenities. Starting from the golf course, surrounding wildlife, magnificent gardens, and the stunning castle, their background oozes luxury and class. The video sells the entire thing for them.

12. Y.CO Yachts

Are you in the market for a luxury yacht? Even if you're not, it's hard to take your eyes off Y.CO yachts' aesthetic background video.

What I like: Much like the above example, Y.CO Yacht uses their website video to do all their selling for them. While the video plays in the background, an added bonus is that the search bar keeps typing suggestions for their products, which makes it that much more engaging.

13. Wethepeople

As a BMX bike website, Wethepeople does a great job by showing dynamic videos of riders using their products.

What I like: Wethepeople's visuals are fast and striking, just like their BMX bicycles. It's a great example of how your website video has to not only exemplify your product or service, but get your brand ethos across as well.

14. Aris Boutique Hotel

Although this is another hotel website, you can see the difference in the messaging for Aris Hotel from other examples I've added to this list.

What I like: Aris' video focuses on the calm and serene atmosphere around their hotel. Even from a brief look, you can feel the ambiance that the hotel can provide. Again, this is a great way of letting your website video do your selling for you.

15. Holland Green

Holland Green is a luxury architecture firm that uses its website videos to showcase past projects and attract new clients.

What I like: Holland Green uses its background videos to showcase each of its architecture projects. Just scroll the site and see the differences in how they work and their services. This visual story ties into their purpose as architects and interior designers.

16. DojaCode

This website is part of a collaboration between Girls Who Code and Doja Cat.

What I like: This webpage is highly visual and immersive, and pulls you right into the experience with a background video that seamlessly combines coding and music.

17. Phantom Hire

Phantom Hire is a wedding car hire brand that wows with its website video.

What I like: If you're looking for websites that do their marketing right on their page, you must check out Phantom Hire. The background video features stunning cars and transitions, not only showcasing their service but demonstrating a really strong use of web video, too.

A CSS Video Background to Engage Your Audience

After looking at all these examples, I'm sure you're convinced: life is short, and nobody wants to waste their time on a run-of-the-mill webpage.

As I've illustrated in this post, with just a few lines of CSS, you can create a full-page video background template that you can customize for your audience.

Using a site's background for a video might not be the ideal choice for every website, and are usually a no-go on mobile websites due to their impact on mobile performance. However, if done well, video backgrounds can make quite an impact, and there's no need to even push play.

Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.

Don't forget to share this post!