Squarespace Background Video: Step-By-Step Guide

 
 squarespace-background-video-guide

If a picture’s worth a 1,000 words –– imagine what a background video could do for your website!

Imagine a chef preparing mouth-watering dishes on a restaurant's menu page. Imagine a hairstylist coloring a client's hair on a salon's appointment page. Imagine an unfocused-to-focused eye test chart on an optometrist's home page. There are endless creative possibilities with background video.

Squarespace background videos are muted, looped videos that can be stylized with filters, overlay colors and text. They're hosted on Vimeo or YouTube and can be added to Cover Pages as full-bleed background videos and template pages as banners.

In this post, I'm going to share step-by-step instructions on how to create and add a background video to your site.

1. Get Ready

 background-video-questions

Background video is available for Squarespace Cover Pages and several other Page types, including regular Pages, Products, Albums, Events and Blogs. Visit the Squarespace Help Guide for a list of supported templates and page types.

Starter Questions

  • What page on my site do I want to add a background video?

  • Will a background video improve my page?

  • How will a background video enhance the user experience or aesthetics of my page?

  • What kind of video will help achieve the goal of my page?

Pro Tip
Plan ahead and communicate ideas by creating a storyboard of your video.

2. Film, Edit & Export

 edit-export-background-video-screenflow

Video Tips

  • Avoid videos over 40 seconds

  • Avoid quick cuts and excessive panning

  • Avoid large files that increase load times or midstream pauses

  • Use a frame rate that's around 25 frames per second

  • Use a resolution of 720p (1280 x 720 pixels)

  • Use video that has smooth transitions and loops seamlessly

DIY Video

Use an SLR camera or a modern smartphone camera to shoot high-quality video. Shoot the video horizontally, not vertically.

Stock  Video

If you can't shoot any video, use stock video as long as you can adjust it to match your branding with text and color overlays.

For my background video, I downloaded a free video from Coverr and added it to ScreenFlow –– my preferred video editing software for tutorials, screencasts and more (see image). Then, I exported the video to Vimeo by clicking File > Publish to > Vimeo...

Stock video websites:

Video Editing Software

Pro Tip
Caleb Wojcik's DIY Video Production Guide and Vimeo Video School are both great options to learn how to shoot, edit and create videos yourself.

3. Upload Video to Vimeo or YouTube

 vimeo-privacy-settings

Squarespace doesn't host background videos, so you need to upload the video to Vimeo (see image) or YouTube. Then, paste the share URL into Squarespace. On both Vimeo and YouTube, the control buttons (play, pause, volume, share) won't be visible in the background video.

Vimeo ( Vimeo Plus / PRO / Business)

  • Set who can watch the video to "Anyone" or "Hide this video from vimeo.com"

  • Set where the video can be embedded to "Anywhere" or "Only on sites I choose"

  • Click Save

YouTube

  • Set your video to Public/Unlisted, so the video can be embedded (private videos won't display as background video)

  • Disable Overlay ads

  • Click Save

Pro Tip
For Vimeo, if you select to embed the video "Only on sites I choose," list all of the domains visitors might use to access your website (e.g. company.com, company.net, company.squarespace.com).



4. Copy & Paste Share URL

 background-video-share-url

Cover Page

  • Copy the share URL from Vimeo or YouTube

  • Click + > Cover Page

  • Name the Cover Page > Enter

  • Click the Media panel > Video tab

  • Paste the share URL into the Video URL field

Page (Banner)

  • Copy the share URL from Vimeo or YouTube

  • Click + > Add Page or another supported page type

  • Enter the Page title > Shift + Enter (keyboard shortcut)

  • Hover over the Page title and click the gear icon

  • Click the Media tab > Video > Paste the share URL into the Video URL field (see image)

Index Page (Sub-Page Banner)

  • Copy the share URL from Vimeo or YouTube

  • Click + > Index > Enter the Index title > Enter

  • Click + > Add Section > Content

  • Enter the Index title > Shift + Enter (keyboard shortcut)

  • Hover over an index's sub-page title and click the gear icon

  • Click the Media tab > Video > Paste the share URL into the Video URL field

Pro Tip
A background video can also be added to the Lock Screen. If you're using this feature and want to enhance the Lock Screen with a video background, click Home menu > Design > Lock Screen > Video tab > Paste the URL into the Video URL field.

5. Add a Filter

Filter effects can be added to create a more stylized background video (see images). In the Video tab, click the drop-down menu to add a filter.

Use the slider to increase/decrease the intensity of any filter except for Invert. Squarespace warns that filters may render differently across browsers. Additionally, since the YouTube logo may appear in the bottom right corner, Squarespace suggests using the Blur Filter to make the logo more subtle.

Pro Tip
The same filter that's applied to the background video will also apply to the Mobile Fallback Image (Step 7) to create a consistent user experience on desktop and mobile browsers.

6. Adjust Playback Speed (YouTube)

 background-video-youtube-playback-speed

The playback speed of YouTube-hosted videos can be adjusted. The default playback speed is 1x. Playback speeds include the following:

  • 0.5x (slow)

  • 1x (normal)

  • 1.5x (faster)

  • 2x (fastest)

In the Video tab, click a Playback Speed > Save.

7. Upload Mobile Fallback Image

 background-video-mobile-fallback-image

Since background video isn't supported on mobile browsers (smartphones and tablets), a Mobile Fallback Image is used as a substitute. This static image is also used on desktop browsers when the background video buffers.

If a Mobile Fallback Image isn’t provided, the page's background color or banner overlay color is used instead. Color choices can be adjusted in the Style Editor (Step 8).

For a consistent user experience on mobile and desktop platforms, save a frame at the beginning of the video and use that for the Mobile Fallback Image. To save a frame in ScreenFlow (the software I used for my example video), click File > Save Frame... > Name the file and choose a location on your computer > Click Save. Ensure your image is optimized for the web (500 megabytes or less).

Now that you've added the Video URL and chosen a filter, let's add the Mobile Fallback Image. Click Add an Image > Save.

Pro Tip
If you want to play the video on mobile, use the Video Block instead of a background video. Enter the URL into the Video Block's Video URL field and click Save.

8. Add Text & Color Overlay

 video-background-add-text-colors-overlay

If your template supports banner text and color overlays, they'll appear over the banner video and the Mobile Fallback Image. Text and color overlays can be used to create a compelling visual effect (see image).

Cover Page

Click the Home menu > Style > Background Video > Custom Overlay Color > Adjust to your preference or adjust an overlay Color Blend Mode:

  • Normal

  • Multiply

  • Screen

  • Overlay

  • Darken

  • Lighten

  • Color Dodge

  • Color Burn

  • Hard Light

  • Soft Light

  • Difference

  • Exclusion

Page or Index

Click the Home menu > Style > Style Editor. Overlay Color Blend Mode isn't available for banner overlays.

Pro Tip
Use the Style Editor to adjust the text and overlay color (the default is gray) and fonts, so the text is legible in every frame of the video and consistent with your branding.

9. Enable the Page

To go live with the background video, hover over the Page title and click the gear icon > Check Enabled.

Review the page on mobile and desktop browsers to ensure it loads correctly and you're satisfied with the result.

Pro Tip
If the video doesn't autoplay, ensure the privacy settings are correct on Vimeo or YouTube.

Wrap Up

You just learned how to create and add a background video on your Squarespace website. Video can be an engaging way to generate interest in your business. Remember, if a picture’s worth a 1,000 words –– imagine what a background video could do for your website!

Now, go master your website.

Squarespace Background Video: Step-By-Step Guide first appeared on the Bento Sites Blog by Jeff Shibasaki.