Adding background videos

Add interesting visual effects with videos that automatically play behind your site's content.

Last updated January 16, 2025

One way to style your site’s background is to use videos for a dynamic visual effect. For example, you can add text and images over background videos to add more dimension and dynamic content to your pages. These videos play on a loop and are silent. For background videos, you can:

  • Use YouTube and Vimeo videos on page sections, banners, and other areas, depending on your site’s version.
  • Upload videos you own to section backgrounds in version 7.1.

For a custom look and feel, you can also apply stylized filters and overlay colors.

Learn about all your background styling options in Styling your site background.

Tip

You can also add animated backgrounds with image effects and unique background art. To learn more, visit Section background images and Section background art.

Watch a video

Before you begin

General tips

  • Your video hosting service is responsible for the quality and resolution of your streamed videos. The stream quality is outside Squarespace's control. If your videos appear low-quality, ensure you follow our design tips.
  • Videos uploaded to Squarespace can display at 1080p or 360p depending on device, browser, and internet connection. There's no way to manually select which resolution displays.
  • While background videos that follow our design tips should display on computers, videos may not always display on mobile devices, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear if the background video can't load.
  • The page background or banner overlay color displays 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.
  • While background videos support YouTube and Vimeo URLs, they don't support adding embed code.
  • Devices in low power or power saving mode won't display background videos. If you add a mobile fallback image, the fallback image displays. If you don’t add a fallback image, a thumbnail from the video and an unresponsive play button displays instead.

YouTube

  • Disable overlay ads, or they'll display over the background video.
  • Your visitors may briefly see a YouTube logo, the title of the video, a watch icon, or a share icon when the video loads. This depends on the layout and device.
  • Video ads that play before the video, also known as pre-roll ads, won't play on background videos.

Vimeo

  • You need to have a paid Vimeo plan to add a background video from Vimeo.
  • It's not possible to add HD Vimeo videos to cover pages or banners.

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 to help your background video look great. If you're uploading a background video, learn about our video requirements.

When you're considering which videos to use in a background, follow these tips:

Tip Notes
Keep the video file small

For embedded videos, there’s no video length limit. For uploaded videos, the length limit is 60 seconds. Video length and resolution factor into the video file size.

Large video files take longer to load and can cause videos to pause mid-stream, depending on the visitor's connection. Keep in mind:

  • An ideal frame rate is around 60 frames per second, especially if the video displays in slow motion.
  • If your video appears blurry on mobile devices, try increasing the frame rate to more than 60 frames per second, then re-upload the video.
  • Keep your video length under 40 seconds.
  • Shorter videos may display the background color more frequently when looping.
  • Use a resolution of 1080p and a bitrate of at least 3 Mbps.
  • When filming videos, limit the motion of the shot or motion of objects in the shot. Less motion often results in smoother looking background videos.
Use a wide aspect ratio
  • Section backgrounds resize automatically based on content and the visitor's browser window size.
  • To minimize cropping, use videos with a horizontal or landscape aspect ratio, like 16:9.
  • Try to find or record videos where the subject of the video is centered and has some space around it that could be safely cropped.
Limit number of background videos per page
  • Add two or less background videos per page. This way, you'll reduce your page size, leading to faster loading times.
Choose videos with smooth transitions
  • To keep your videos accessible, avoid content in your video that flashes three or more times in a one second period.
  • Consider transitions and avoid quick cuts or excessive panning. Videos that appear to jump around are jarring to visitors.
Contrast with text To learn about color contrast, visit Making your Squarespace site more accessible.

Step 1 - Prepare your video file or URL

To add a background video, you can upload your video file to a section background in version 7.1. You can also upload your video to YouTube or Vimeo and find its share URL.

Note

Ensure the URL doesn't include a time stamp for a specific section of the video, as this will prevent it from loading.

Upload your video

To prepare your video file for upload, ensure your video meets our video upload requirements. Keep in mind, the length limit for uploaded background videos is 60 seconds.

YouTube

  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 or Public and allows embedding.
  4. Copy the video's share URL.

Vimeo

  1. Create or log into a Vimeo account.
  2. Upload a video or find one you've already uploaded.
  3. Ensure the video's privacy settings are set to Public or Hide from Vimeo. Allow embedding Anywhere or on Specific domains. If you choose to allow embedding only on specific domains, ensure you add your website’s domain in the text field that appears.
  4. Copy the video's share URL.

Step 2 - Add the video

The steps to add a video depend on your site's version and where you're adding the video.

Tip

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

Section backgrounds

You can add background videos to any section except blog, events, gallery, and store sections. Ensure your video follows our video requirements. To add a background video:

  1. Open the Pages panel and click the page with the section you'd like to edit.
  2. In the top-left corner, click Edit.
  3. Click the section's pencil icon, then click Background.
  4. Click Video, then click the + icon. Choose a video source from the drop-down menu. For detailed steps, visit the section below.
  5. Scroll down to customize other video settings.
  6. Click Save to save your changes and keep editing, or Exit, then Save to close the editor.

Choosing a video

After clicking the + icon, choose how to add your video:

Page banner

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

  1. Open the Pages panel.
  2. Hover over the page title in the left panel and then click “the.
  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.

Supported templates

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

  • Adirondack - Layout, products, album, events, blog
  • Bedford - Layout, products, 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, products, album, events, blog
  • Tremont - Layout, products, album, events, blog
  • York - Layout, products, album, events, blog, project, index

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.

Cover page background

To add the video to a cover page:

  1. Open an existing cover page, or add a new one.
  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:

  • 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 sites support lock screens.

To add a video to a lock screen:

  1. Open the Lock Screen panel.
  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 - Select a background width

Background videos can appear at full-bleed or inset from the edges of the section.

  • Full Bleed extends the image from one edge of your browser window to the other, spanning the width of your site.
  • Inset indents the image slightly and creates a border around the image.

When the image is set to Inset, you can set the border color.

Step 4 - 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 dropdown menu in the Video tab. For all filters except Invert, you can adjust the strength using the slider. Filter effects may render differently across browsers.

You can use the Opacity filter to add an overlay color. Click the Colors tab to select a color theme for the overlay and any content added. To learn more, visit Changing colors. If you remove the video, the overlay becomes the section's background color.

Step 5 - Change the playback speed

If you're using a YouTube or Vimeo URL link, you can change the setting under Playback Speed to increase or decrease your video's speed. The default speed is 1x, meaning the video plays at its normal pace.

Step 6 - 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 your site's version. To add a mobile fallback image:

  1. Click Edit on the page, then click the pencil icon on the section with the video background.
  2. Click Background, then click Video.
  3. Under Mobile fallback image, click Add an image to upload an image, or click Search images to reuse an image or add a stock image
  4. Click Save to save your changes and keep editing, or Exit, then Save to close the editor.

The mobile fallback image also displays while the video loads.

If you don't add a mobile fallback image, a background color will display on mobile instead. This color is set by the section colors.

  1. In the Video tab of the Media panel, scroll down to Mobile fallback image.
  2. Click Upload an image, or Search for image to reuse an image or add a stock image.
  3. Click Save.

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

For cover pages, use the Background: color tweak.

Tip

Add an animated .gif as your mobile fallback image to create a similar effect to the video.

Disable or delete the background video

To remove an existing background video, you can disable or delete the video. To disable background videos, switch to a background image. This way, the set image replaces the background video. It's only possible to delete background videos in version 7.1 sites. If you delete a video, it frees up video storage space on your site.

To disable your background video:

  1. Click Edit on the page, then click the pencil icon on the section with the video.
  2. Click Background, then click Image.
  3. Click Save.

Every site has 30 minutes of video storage. If you reach this limit, you can delete videos to free up storage space. To learn more, visit Managing and reusing images and videos.

  1. In the Pages panel, hover over the page title in the left panel and click “the.
  2. Click Media, then click Image.
  3. Click Save.

If you're using a cover page, you can also choose None to replace the video with a background color

Watch a video (version 7.0)

This video applies to Squarespace version 7.0.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.