How to make and embed a video background

Courtney is a tech writer specializing in content marketing and SaaS content. She's based in Charlotte, NC where she lives with her daughter and toy poodle.
Courtney Hall
Want to up your website’s awesome factor with a video background for your homepage? We're here to help.

Fifteen seconds. That’s how long an average user will spend on your website before navigating away. When you’ve got just a quarter of a minute to make a good impression, the design of your homepage can make all the difference between engaging a user and losing them for good. But did you know people spend up to 88% more time on websites with video?

Videos are eye-catching, attention-grabbing, and great at conveying vital information about a brand in an instant. Including background video on your homepage is a super effective and straightforward way to take hold of your visitors’ attention — and get them to take action.

But for the non-web designers among us, adding video to your homepage can seem daunting. That’s why we’ve gathered some awesome content inspiration and a quick breakdown of everything you’ll need to make a video background for your homepage.

What should I include in my homepage video background?

Whether or not you decide to incorporate a video background into your website, it’s essential to understand what elements, in general, make for a good homepage. There are a few critical components that are musts:

  • Branding elements: Make sure you indicate to users that they’ve found your brand through the use of coordinated elements like logo, color scheme, and aesthetic.
  • Brand value statements: What do you offer, and why are you different? Remember to try to boil down your brand to the basics, so even those with a tendency to skim will walk away with the right message. If you’re sure what to include, consider the five “W”s — who, what, where, when, and why — to cover all your bases.
  • Brand personality: Is your brand playful and fun or serious and elegant? Make sure your content reflects your vibe! This will help give your customer a cohesive experience and fast-track your brand recognition.

Did you know?

People spend up to 88% more time on websites with video.

You'll also want to include basic user experience features like:

  • Eye-catching visuals and colors: Even if your company’s vibe is more black and white, make sure to choose a color palette and stick to it.
  • A clear CTA: Ultimately, you want your people to take action on your site. Make sure you let them know what that is, and clear any blockers to get your customers right where you want them to go.
  • Engaging copy: We love an eye-catching visual, but make sure you compliment the user experience with fun copy to match. This is a great place to explore your brand’s personality, so get creative!
  • Screen size optimization: Make sure your website and video will look pretty on any player or screen size. With mobile usage always on the upward trend, choose a site display that will allow your people to consume your content from anywhere. 
As a designer, I care a lot about presentation and the experience our customers get when viewing our content or looking around at our site. The default Vimeo features produce a beautiful-looking video player.”
Anna Konsen, Designer at Bloomscape

Website video background examples we love

We should talk about something. As much as video can enhance your website, it can just as easily detract from it. No one wants to feel overwhelmed by autoplay audio and hyperactive graphics.

But 58% of businesses have a video on their homepage — which means some brands must be doing it right. The key is to create a video to evoke an immediate, positive emotional response, and ultimately elicits a user action. A homepage video background can be especially useful for brands that offer visually appealing products, represent a distinctive lifestyle, or provide one-of-a-kind experiences.

Y.Co

Yacht brand Y.cho's video background for their website

The homepage at Yacht brand Y.Co immediately draws you into the adventure of the high seas. When landing on this website, there’s no question about what their brand is — high-quality, powerful watercrafts for people who love luxury and the ocean. This site smartly and strategically uses copy throughout the homepage, to weave effortless CTAs into the user experience.

Mediaboom

Digital marketing agency Mediaboom's video homepage background for their website

Digital marketing agency MediaBoom uses understated black and white video to allow visitors into their professional world. Incorporating shots that include various tech devices like iPhones and laptops makes it immediately apparent that this agency embraces technology in everything they do, all while highlighting the people behind the screens.

Patagonia

Patagonia's background video for their website

Patagonia is known for creating quality clothing and gear for people who love being active in the great outdoors. Patagonia's website video immediately transports you to several beautiful and exciting outdoor locales featuring gorgeous, high-quality video of people engaged in various adventure activities. This site uses video to directly draw you into this brand’s lifestyle, and preview their company ethos in a flash.

How to make a website video background

For those of us who aren't professional techies, the idea of incorporating a website video background into a homepage may seem a bit intimidating. However, with the right tools, anybody with a business or a website can make it happen.

Vimeo's Video Creator has a ton of templates that make it easy to make stunning, full-width videos for embedding on your website, or anywhere online. Here’s how to make one.

1. Select a template on Vimeo's Video Creator.

Yoga studio website homepage or facebook cover video from vimeo create

You can select from hundreds of customizable templates designed for tons of different use cases. Whether you’re a yoga studio or an eCommerce site, there are plenty of options for you to make a video that’s perfect for your brand POV.

2. Upload your footage (or pull from our stock library)

You’ve got two choices when it comes to choosing the raw material for your background video: you can either capture your own or utilize Vimeo’s immense stock library to access high quality video in a flash. Let’s go over your options.

Shooting your own background video

If you’d like to showcase your real product, workplace, or employees, you might want to invest the time and money to capture some personalized video for your website background. Just remember to prioritize quality and high-res video if you’re gonna go DIY. You want to make the best first impression possible!

Using stock videos for your website background

If your personal footage isn’t quite up to par (or if you just don’t have the time, we get it) — you can use our preloaded stock video for your website background. We offer thousands of free-to-use videos made by some of the top online creators, and we're pretty confident you’ll be able to find the perfect video to capture the image that you’d like to portray.

3. Customize to your heart’s content

fashion ecommerce website video background or facebook cover video from vimeo create

Vimeo Create lets you add text, your own brand kit (including logo!) and so much more. Simply trim your video to your ideal length, add any relevant text and image stickers, and you’re ready to go. This makes adding text-based CTAs super easy, so embedding it into your website is easier than ever.

4. Save and share!

Missing alt text!

Once you’re done selecting the style and length of your video, simply save it directly to your Vimeo account or download it to your desktop. Vimeo’s simple embedding process makes it quick and easy to build a stellar homepage with a video background. Here’s how to do it:

How to embed a website background video:

To make sure your embed looks super polished, Vimeo users of any paid tier can hide elements of the Vimeo player, and can eliminate the play button and progress bar entirely. That way, you can get the clean, full-screen video you need for a website background.

  1. To embed your video background, generate your embed code and add the parameter “?background=1” to the end of the URL. Doing this will turn off all player toggles, put the video on an automatic loop, set the video to autoplay, and ensure that the video sound is muted. Basically, everything you need to create a video background!
  2. If you want your background video loop to have sound, just add the parameter “muted=0” to your embed code. To learn more about using Vimeo to embed background videos, check out our full comprehensive guide.

How do I make a video for my website?

There are lots of ways to create a video that can live on your homepage or throughout your website. Vimeo Create offers tons of endlessly customizable templates to make it easy.

Quick tips for your background video

  1. Use a short video loop: The best background videos are usually relatively short loops. Opt for videos that can offer a seamless looking, infinite loop that tells a story or conveys an image. (Also, long videos can make your site’s loading time sluggish, which is bad for user experience and SEO!
  2. Take your time choosing the right video: Picking a video that doesn't send the correct message is worse than not using a video at all. Take your time to select a quality video with relevant images that match the tone you’re looking for.
  3. Less is usually more: While it’s easy to get excited about using the most cutting edge bells and whistles on your website, make sure that your video background does not pull the focus away from your site’s primary objective. A super-cool video isn’t helpful if it leads to a higher bounce rate or a confusing user-experience. You also want to make sure that your visitors can still read the copy, navigate the site, and respond to the CTA.

Make your own video background

Dive into our huge selection of customizable templates to spice up your site and boost that dwell time.

Embed anywhere and everywhere

Using a website homepage video background is an easy way to make your website stand apart from the rest. But you can also use any slick branded video you make throughout your marketing materials. Think Facebook cover photos, Instagram story slides, and even more website integration. Not only is it incredibly easy to embed your video with Vimeo, you can also share your content to connected social channels with one click. Pretty sweet, right?

What is the embed code for a video?

The specific structure of an embed code may differ a bit based on the video hosting platform, such as Vimeo. Rather than simply sharing a link to the video, the embed code allows you to place the video player directly on your website or platforms like WordPress, Squarespace or Wix. This makes it easy to incorporate videos from different sources right into your site.

Embed your video now

More from the Vimeo blog

A video showcase of a creator named Maeve that says Maeve's work at the top above four embedded videos

How to make a video editor portfolio: Examples and tips

Want to start making money with video? Learn how to create a professional video website in 5 simple steps.

How to create a website for video sharing in 8 steps: A best practices guide

Vimeo and Gmail integration to add video to email

How to embed videos in Gmail and help make emails more engaging

How to embed videos in your email campaigns

Learn how to embed videos in your email campaigns

Learn how to embed Vimeo videos on your website, add videos to Wix, Shopify, WordPress, Squarespace, or embed a Facebook video.

How to embed a video on your website: A step-by-step guide

Animated GIFs are an excellent way to convey information quickly without embedding an entire video. Learn how to make GIFs in minutes with tools like Vimeo, Photoshop, Adobe Premiere Pro, and other online GIF makers.

How to convert videos into GIFs

Wondering how to do a poll on Instagram that actually gets tons of participation? Explore these 5 Instagram poll ideas for businesses of all sizes and industries.

Here’s how to make unskippable Instagram polls for your small biz

Ready to take your email game up a notch? This comprehensive guide is here to make it easy to add a GIF to your next email send.

How to put a GIF in your next email