Recently I was talking to one of my web design/development clients and we were brainstorming ways to make his new website memorable so that it would stand out in a competitive industry.

We talked about things like strong photography (and leveraging stock photos in addition to their own photos), logos and branding, but features all felt like a given. I then suggested we add a video background to the home page and was met with a “We can do that with Squarespace?!” response.

I laughed and reassured him that yes, we could, and briefly explained the process.

Pssst: not sure what video backgrounds look like? A few examples can be found on Mariah Coz's websites (she's one of my favourite online marketers) or Chasing Sunrise's website.

This got me thinking about how many wonderful features Squarespace offers and how, when used correctly, they can really elevate a website to the next level and make it one that people remember.

Video backgrounds are one of my favourite features since they pack a punch but aren’t a hassle to set up or maintain. Not only do they signify a modern website, they are also relatively new and therefore stand out in visitor’s minds.

In today’s article, we are going to look at video backgrounds and learn how easy it is to add one to your website. We’ll also cover when and why they are used, as well as things to avoid when adding video backgrounds to your Squarespace website.

Whether you’re in the process of launching a new website or you already have one but are interested in updating it, a video background could be a great option for you and your website.

What are video backgrounds?

Video backgrounds are small video clips that automatically run on a website, usually as full-page or header sections.

Websites differ from print in that they aren’t “flat” or static : instead, modern websites include rich visual elements such as video and animation that make for stronger user experiences.

How are video backgrounds used?

Video backgrounds are most commonly used in one of two ways:

Large background videos (full-browser width) are used to set the mood or atmosphere of the website
Others use video backgrounds to showcase a product/service in action or demonstrate how it works in a fun and engaging way

By including a video background on a website, you’re able to make an instant impact to visitors for your site and really set the tone. There are loads of reasons why you might want to include a video backgrounds, but here are some of my favourite use-cases:

Highlight work or people : if you’re a company, you might humanize your organization by showing a video of employees or tasks
Showcase beautiful videography : this is particularly useful for artists or those with a video portfolio. If you’ve got it, flaunt it!
Add humour : adding a short but snappy video background makes your website (and business/brand) more approachable and memorable
Demonstrate a product / service in different ways or in various scenarios
Using random or unexpected video content in your background to stand out or make the user slow down and process what they’re seeing for maximum impact
Video backgrounds can help with sales without being sales-y
Show off a 360 view of a product : this is especially great if you have something that would benefit from a video tour, not just product photos, such as a property or physical iteam
Make an aspirational product/service more tangible : for example, if you run a chartered yacht company, you could run a video background of people enjoying a dream day out on the boat to make it “real” and encourage people to consider it in their own lives
Turn minimalist design into something striking and memorable : especially true if your website just just a simple top menu with very few pages or content, a full-page video background will do wonders to make your website more appealing

As you can see, there are countless reasons to include a video background on your website. I’m sure you can think of many ways they can be applied to your own business website!

Adding a video background to a Squarespace website

There are two places where you can add video backgrounds to your Squarespace website :

on some website template's page banners
on Cover pages

Adding a video background to Squarespace couldn't be easier. Simply upload a video to YouTube or Vimeo then copy its share URL into the Media panel located in your Page Settings. The video will automatically play on loop without sound. I love that you can customize the look and feel of your video background by playing around with the stylized filters and overlay colours.

In just a few steps, you can easily add a video background to your Squarespace website.

Step 1 : Get video URL

First up, you must upload your video to Youtube or Vimeo and find its share URL.

YouTube

Create or log into a YouTube account.
Upload a video or find one you've already uploaded.
Ensure the video is set to Unlisted/Public and allows embedding.
Copy the video's share URL.

Vimeo

Create or log into a Vimeo account.
Upload a video or find one you've already uploaded.
Ensure the video is set to Anyone and allows embedding.
Copy the video's share URL.

Step 2 : Add the video

Note: depending on whether you're adding a video background to a website page or cover page, your process will be different. Be sure to follow the correct steps!

Cover page background

Open an existing Cover Page, or add a new one:
- For one-page Cover Page sites: In the Home Menu, click Media.
- For Cover Pages added to websites or stores: In the Home Menu, click Pages.
Click Media.
In the Media panel, click the Video tab.
Paste your video's share URL into the Video URL field.

Friendly reminder : I always recommend compressing your video as much as possible (without compromising quality, of course) before uploading to your website so that you don't slow the page load.

What to avoid with video backgrounds

Video backgrounds should always supplement website content - they should NOT steal the focus.

The most effective video backgrounds will be smooth and subtle to avoid distracting users from why they're really on your site. Most small business websites are there to promote their products or services, and a crazy background video that doesn't support that goal isn't much help, even if it looks cool.

There are two main aspects you should avoid if you choose to use a video background on your website.

Too much movement. If the video you choose has quick zooms, a lot of panning or quick cuts, you might actually make people feel uneasy or even sick when they watch it on your site - not good at all!
Illegible text over video. Since most background videos have text overtop of them, make sure that people can actually read it! The text colour should be visible over the video content but shouldn't clash either. When in doubt, add an overlay or background behind the text section.

Final thoughts

Video backgrounds are a fun and modern element that can easily be added to any website but Squarespace makes this particularly quick. Not only will video backgrounds make your website more memorable, they can do a lot to improve the user experience when used correctly.

If you're looking to play around with any new features that Squarespace offers, I definitely recommend giving video backgrounds a try! Follow the instructions above and you'll be up and running in no time.

Now it's your turn to let me know what you think about video backgrounds - do you love 'em or hate 'em? Have you used them on your own website? Know of any websites that use them effectively? Leave me a note in the comments, I can't wait to hear from you!