Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Adding background videos

You can embed background videos from YouTube and Vimeo on Cover Pages and some templates' page banners. Background videos play on loop without sound and add a dynamic visual effect to your site.

Background videos pull from Vimeo or YouTube video share URLs. For a custom look and feel, you can apply stylized filters and overlay colors.

Watch a video

This video applies to Squarespace version 7.0.

Before you begin

General tips

  • The page background or banner overlay color will display while the video buffers. If the video takes a few seconds to load, the mobile fallback image may display. Load time depends on your internet connection.
  • Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
  • There's no time limit for videos, although shorter videos may display the background color more frequently when looping.
  • Background videos don't support embed code.


  • Set the video to Public/Unlisted and allow embedding. Private YouTube videos don’t display as background videos.
  • Disable Overlay ads. If your video has Overlay ads enabled, the ads will display over the background video.
  • Depending on the layout and device your visitors use, they may briefly see a YouTube logo, the title of the video, a watch icon, or a share icon when the video loads.
  • Video ads that play before the video, also known as pre-roll ads, won't play on background videos.


  • You must have a Vimeo Plus plan or higher to add a background video from Vimeo.
  • Edit your Vimeo privacy settings to ensure your videos can be embedded. Set the video to Anyone and allow embedding Anywhere. Private Vimeo videos don’t display as background videos.
  • You can also set the video to Hide this video from and allow embedding Only on sites I choose.

Design tips

Background videos are a great way to add visual interest to your site, but they shouldn't distract from your other site content. Here are a few best practices that will keep your background video looking great.

Keep the video file small

Video length and resolution factor into the video file size. Large video files take longer to load and can cause the video to pause mid-stream, depending on the visitor's connection.

While there's no official time limit, we recommend keeping background videos under 40 seconds if possible. One way to keep videos short is to choose content that loops seamlessly, which makes the video seem longer but takes up less space.

We recommend using videos with:  

  • A frame rate of around 25 frames per second.
  • A resolution of 720p, which is 1280 x 720 pixels.

Choose content with smooth transitions

When you choose a video, pay attention to transitions to avoid quick cuts and excessive panning. Videos that appear to jump around catch the eye and can be jarring.

Ensure contrast with text

Keep your background video compatible with your site's styles, especially the color of any text you place over it. Ensure visitors can read your text at all points during the video.

If there's not enough contrast, you can:

Step 1 - Find your video URL

To add a background video, upload it to Youtube or Vimeo and find its share URL. It isn't possible to upload a video directly to Squarespace or embed videos hosted by a different service.


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


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

Step 2 - Add the video

The steps to add the video are different for website page banners and Cover Pages. Follow the steps below depending on where you're adding the video.

Note: Until you add your URL, you'll see a short video of an ocean as a demo placeholder.

Page banner

In some templates, you can add a video background to a website page banner in place of a static banner image. This creates a great visual effect when you combine it with text overlays.

How you add video to your page banner depends on which version of Squarespace your site is on.

  1. In the Home Menu, click Pages.
  2. Click the page where you’d like to add a banner, then click Edit.
  3. Add a block section and click its pencil icon.
  4. Click Background, then click Video.
  5. Paste your video’s URL into the Video field.
  6. Scroll down to customize other video settings.
  7. Click Save.
  1. In the Home Menu, click Pages.
  2. Hover over the page title in the left panel and then click the [gear icon].
  3. Click the Media tab.
  4. In the Media tab, click the Video tab.
  5. Paste your video's URL into the Video URL field.
  6. Click Save.

Supported templates

You can add banner videos on the listed page types for these template families:

  • Adirondack - Layout, Product, Album, Events, Blog
  • Bedford - Layout, Product, Album, Events, Blog
  • Brine - Layout, Album, Events, Blog
  • Five - Layout, Album, Events, Blog
  • Montauk - Layout, Events, Blog, Index. Must have a mobile fallback image.
  • Pacific - Layout, Product, Album, Events, Blog
  • Tremont - Layout, Product, Album, Events, Blog
  • York - Layout, Product, Album, Events, Blog, Project, Index
  • Version 7.1 - Block sections for all pages

Cover Page background

To add the video to a Cover Page:

  1. 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.
  2. Click Media.
  3. In the Media panel, click the Video tab.
  4. Paste your video's share URL into the Video URL field.

Supported layouts

In most Cover Page layouts, videos play in a full-bleed background behind the Cover Page's content, extending to the edges of the browser.

There are a few exceptions. These layouts display videos differently:

  • Displays in side panel - Backstory, Flash, Spotlight, Session, Vignette
  • Displays in the circular portrait area - Focus, Monocle
  • Doesn't support video - Flagship, Harbor

Lock screen

You can add a background video to your lock screen in place of an image or a slideshow. All templates support lock screens.

To add a video to a lock screen:

  1. In the Home Menu, click Design.
  2. Click Lock Screen.
  3. Click Media.
  4. Click the Video tab.
  5. Paste your video's URL into the Video URL field.

Step 3 - Add a filter

Filters alter the video's appearance and give it a stylized look. Filters also affect the video's mobile fallback image. A filter's effect depends on the color and imagery of the video, so we recommend experimenting to find the right effect.

To add a filter:

Click the Filter drop-down menu in the Video tab and choose from:

  • Blur
  • Brightness
  • Contrast
  • Invert
  • Opacity
  • Saturate
  • Sepia

For all filters except Invert, you can adjust the strength using the slider.

Note: Filter effects may render differently across browsers.

Step 4 - Change the playback speed (YouTube only)

If you’re using a YouTube video URL, you can select a Playback Speed to change your video's speed. The default speed is 1x, meaning the video will play at its normal pace. Choose from four different speeds:

  • 0.5x (slow)
  • 1x (normal)
  • 1.5x (faster)
  • 2x (fastest)

Step 5 - Add a mobile fallback image

Mobile browsers support background videos, but depending on connection speed and browser version, banner videos may not load for every visitor. You can set a mobile fallback image to appear when the banner video can't load. Filters also apply to the mobile fallback image. For the best results, format your image for web display before uploading it.

How you add a mobile fallback image depends on which version of Squarespace your site is on.

  1. In the section you're editing, click the pencil icon. 
  2. Click Background, then click Video
  3. Scroll down and drag your image into the image uploader. You can also use a stock image.
  4. Click Save.

In 7.1, the mobile fallback image also displays while the video loads.

  1. In the Media panel, click the Video tab.
  2. Scroll down and drag your image into the image uploader. You can also use a stock image.
  3. Click Save.
Tip: Add an animated .gif as your mobile fallback image to create a similar effect.

If you don't add a mobile fallback image, a background color will display on mobile instead. You can choose this color in these template families:

  • Adirondack - Content Background Color tweak
  • Bedford - Banner Overlay Color tweak
  • Brine Overlay Color tweak
  • Five - Banner Overlay Color and Header Background tweaks
  • Montauk - Canvas Background tweak
  • Pacific - Overlay Color tweak
  • Tremont - Site Background Color tweak
  • York Background Color tweak

In Cover Pages, use the Background: Color tweak.

Step 6 - Add an overlay color (Cover Pages only)

Overlays add a tint to background videos in Cover Pages. By default, the color is a shade of gray complementing your video. Since the visual effect of these settings depends on your video and whether you've set a filter, we recommend exploring different colors and blend modes to find a combination that best suits your video.

To change the overlay color:

  1. In the Cover Page panel or Home Menu, click Style.
  2. Scroll down to Video Background.
  3. Click Custom Overlay Color.
  4. Choose a new color from the wheel.
  5. You can also select an Overlay Color Blend Mode from the drop-down menu to change how the color appears.
For website page banners: If your template supports banner text overlays or a banner overlay color, this will appear over the banner video. Website banner overlays don't offer an Overlay Color Blend Mode.

Disable the background video

To disable the background video, switch to a background image. The set image will replace the background video.

  • Version 7.0 - In the Media tab or panel, click Image, then click Save. 
  • Version 7.1 - Click the pencil icon to edit the section, then click Image in the Background tab.

If you're using a Cover Page, you can also choose None to replace the video with a background color.

Video banners on pages in an Index

You can add video banners to the pages within Index Pages in these template families:

  • Bedford
  • Brine
  • Montauk
  • Pacific
  • York

To add the video:

  1. Open the sub-page's settings
  2. Click Media, then click Video.
  3. Follow the steps above to add the video URL.
Was this article helpful?
151 out of 291 found this helpful
Adding background videos