How to Add a Video Background in Squarespace
To add a video background in Squarespace 7.1, edit the page, click the pencil icon on the section, open Background, switch it to Video, and either upload an MP4 or paste a YouTube or Vimeo link. Keep the clip between 10 and 30 seconds, compress it before uploading, and set a fallback image for slow connections.
When a video background is worth it
Video backgrounds suit businesses whose product is visual: videographers, agencies, events, restaurants, gyms, real estate. Ten seconds of real footage says what three paragraphs can't, which is why I led with full-bleed motion on Drool Visuals and Page Activations.
The flip side: if your only option is generic stock footage, a strong photograph usually converts better than a loop that says nothing specific about you. The video should show your actual work, your space or your people.
How to add a video background in Squarespace
Edit the page and hover over the section that should carry the video, usually the hero. Click the pencil icon to edit the section.
In the panel, open the Background tab and switch the background type from Image to Video.
Add your video one of two ways. Uploading the file directly, as MP4 or MOV, is the better option, since there's no third-party branding and nothing external to depend on. Pasting a YouTube or Vimeo link works fine for a quick test.
Set the fallback image next. This is the still shown while the video loads and on connections that won't autoplay it. Use an actual frame from the clip so the switch is invisible.
Then add an overlay. A dark overlay somewhere between 20 and 40% is what keeps your headline readable over moving footage, and skipping it is the most obvious sign of a rushed job.
File specs that keep it fast
What I use on client builds: 10 to 30 seconds of footage, cut so the last frame flows back into the first.
1080p is plenty. Going to 4K quadruples the download for no visible gain in something running behind text.
Compress it properly before uploading. A free tool like HandBrake on a web-optimized H.264 preset will usually get a 20-second 1080p clip well under 20MB.
Strip the audio track completely, since background video is muted anyway and you may as well save the bytes. Trim before you compress, because nothing bloats a background like 90 seconds of footage nobody watches past the eighth.
The details that make it look intentional
Contrast first. Either use an overlay or position your text over a part of the frame that stays dark and quiet.
Pick footage with a stable focal area, because Squarespace crops the frame differently at every screen size and anything important near the edges gets cut off on phones.
Slow, steady motion reads as expensive. Fast cuts read as chaotic.
And use one video background per page. Two compete for attention and stack up the load time. SPIRE works because a single strong loop carries the hero and everything below it settles down, which is the same restraint that makes site animations work.
When the video won't play
The usual four, in order.
It might still be processing, since uploads take a few minutes to encode. Give it time and refresh.
Phones in low power mode block autoplay by design, which is exactly what the fallback image is for and why it should never be an empty gray frame.
Format can be the issue, so re-export as a standard H.264 MP4 if a MOV is misbehaving.
And if you used a YouTube or Vimeo link, check the source video is still public, because the background dies with it. That's another argument for uploading directly.
If none of those is it, something else is interfering, usually custom code, and that's a quick code support job.
Frequently asked questions
Can a Squarespace video background have sound?
No. Background videos are muted by design on every platform, because autoplaying audio is hostile to visitors and browsers block it anyway. Strip the audio before uploading and save the file size. If people are meant to hear it, embed a proper player instead.
Will a video background slow down my site?
A trimmed and compressed clip, barely. An uncompressed two-minute 4K file, a lot. Stick to one short 1080p clip per page, compressed properly, and the cost stays small.
Do I need a specific Squarespace plan?
Video backgrounds through section settings are on current standard plans, so this isn't a premium-only feature. Direct uploads count against your storage, which is one more reason to compress.
Can I use stock footage?
Legally yes, if it's licensed. In practice your own footage almost always works better, since the whole point is showing something real about your business.
Want a hero like the ones above, with the footage, overlay, type and load time all handled? That's standard in my custom builds. Book a free call and bring your footage.
Related tutorials: Squarespace Parallax: How to Add the Effect · Squarespace Animations: How to Add Them and Which to Pick
Rather have it done for you? See custom Squarespace design, or browse all Squarespace tutorials.
