How to Add a Squarespace Video Background (and Keep It Fast)

To add a Squarespace video background, edit the page, click Edit Section on the section, open Background, choose Video, and either upload a clip (up to 60 seconds), pick one from Squarespace’s library, or paste a YouTube or Vimeo link. It plays silently on a loop behind the section’s content, with a filter, playback speed and a mobile fallback image as options. That is the whole feature on 7.1, and it is worth adding for one section, usually the hero, on sites where motion sells the work: venues, restaurants, studios, makers. It is also the single heaviest thing you can put on a page, so the second half of this post is about keeping it under control: the export settings that make a clip small, why phones often show the fallback instead, and the cases where a still image does the job better.

How to add a Squarespace video background on 7.1

1. Open Pages, click the page, click Edit.
2. Hover over the section and click Edit Section.
3. Click Background, then Video.
4. Choose one: Upload file (60-second limit), Select from Library, Browse background videos (Squarespace’s stock clips), or Add from link for YouTube or Vimeo. Vimeo needs a paid Vimeo plan for background use; embed code is not accepted.
5. Set the width to Full Bleed (edge to edge) or Inset (a coloured border).
6. Optional: add a Filter to darken or tint the clip so text reads, and adjust Playback Speed.
7. Add a Mobile fallback image: a still frame from the clip, exported at 1500 pixels wide.
8. Save and check on a phone.

Squarespace’s background video guide confirms the sections that support it (block sections, portfolio sections and auto layouts), the 60-second upload limit, that the video has no sound, and that without a fallback image a solid colour from the section’s theme shows when the video cannot load. Version 7.0 supports video backgrounds only on cover pages and some template banners.

Upload, YouTube or Vimeo?

How do you make the video small enough?

The clip is downloaded by every visitor before it plays. Export settings that keep it sane:

• Length: 8 to 15 seconds, looping. Nobody watches a background for a minute.
• Resolution: 1920 x 1080. 4K adds nothing visible behind text and quadruples the size.
• Format: MP4, H.264, no audio track.
• Bitrate: 2 to 4 Mbps; a 12-second clip lands at 3 to 6 MB. HandBrake‘s “Web” preset does this in one click, and MDN’s codec guide explains why H.264 is still the safe choice.
• Frame rate: 24 or 30 fps.
• Content: slow, low-detail motion (steam, fabric, a slow pan) compresses far better than fast cuts or confetti, and it reads better under text anyway.

Test with PageSpeed Insights before and after. A 5 MB clip on a hero adds a second or two on a decent connection and is a defensible trade for a venue or studio; a 40 MB clip is not, and it is the first thing to check on a slow Squarespace page that has video. The image size guide has the equivalent numbers for the fallback image.

Why does the video not play on mobile?

Three reasons, and only one is fixable:

• Data and battery rules. iOS and Android may block autoplay on slow connections or Low Power Mode. Squarespace shows the fallback image; that is expected behaviour, not a bug.
• No fallback set. Visitors see a flat colour. Set the fallback image; it is the mobile hero for a meaningful share of visitors.
• The clip is too large and has not loaded by the time the visitor scrolls past. Smaller export.

Design the section so it works with the still image alone: headline, subline, button, readable over the fallback. The video is an enhancement on desktop, and the banner dimension rules for keeping the subject central apply to both the clip and the fallback.

Video background or video block?

A testimonial, a walkthrough or a showreel with sound is a video block. A slow shot of the workshop behind the headline is a background. Using one for the other is the common mistake.

When should you not use a video background?

• Text-heavy heroes. Moving footage under a paragraph is unreadable; use a still with a subtle gradient, as in the gradient background guide.
• Sites where speed is the selling point or the audience is on mobile in poor coverage.
• Stock clips that have nothing to do with the business. Drone shots of a city nobody in the business lives in.
• More than one per page. Two background videos is a slideshow of load times.
• Accessibility needs. Constant motion can be a problem for some visitors; keep motion slow, and consider a pause control via a video block instead for anything busy.

Used once, exported small, with a proper fallback and a filter under the text, a video background is the fastest way to make a Squarespace hero feel like a brand film; used carelessly it is the slowest page on the site, and the speed checklist applies to Squarespace video as much as to WordPress images.

Frequently asked questions