How to Add Videos to Your Squarespace Website (2026 Guide)

You've built a professional Squarespace site. The layout is clean, the fonts are dialed in, and your portfolio looks sharp. Then you embed a YouTube video, and suddenly your page is cluttered with "Watch Later" buttons, recommended videos, and competitor ads.

It's a common frustration. Video now accounts for over 82% of all consumer internet traffic (Wyzowl, 2026), so skipping video isn't an option. But the way you add video to Squarespace matters more than most people realize — it affects page speed, user experience, and whether your visitors stay on your site or drift off to YouTube.

In our testing across dozens of Squarespace sites, we've found that the default video options work fine for simple use cases but break down quickly once you need performance, branding control, or videos longer than 30 minutes. This guide walks through all four methods, with honest trade-offs for each.

Method 1: Video Blocks (The Standard Way)

The Video Block is the most common way to add video in Squarespace 7.1. It supports both external URLs (YouTube, Vimeo) and direct file uploads. Here's how it works:

Step-by-Step: Adding a Video Block

1. Enter Edit Mode: Navigate to the page and click Edit in the top-left corner.
2. Add the Block: Hover over the section where you want the video and click the + button (or "Add Block" in Fluid Engine).
3. Select Video: Choose the Video icon from the block menu.
4. Choose Your Source:
   • Paste a URL: YouTube, Vimeo, or Animoto links are supported natively.
   • Upload a file: Click the upload icon to add an MP4 directly from your computer.
5. Configure settings: Click the pencil icon on the video block to set thumbnail, autoplay, and loop options.

What You Should Know

Native uploads come with hard limits. Squarespace caps you at 30 minutes of total video hosting across your entire site, with individual files maxing out at 500MB (Squarespace Support). If you upload a 4K video, you might burn through that quota with a single clip.

Using a YouTube or Vimeo URL sidesteps the storage limit, but introduces a different problem: the embedded player brings its own branding, ads, and "related videos" that can pull visitors away from your site.

Method 2: Embed Blocks (For Custom Code)

If you need more control than Video Blocks provide — like custom player parameters or embed codes from less common platforms — Squarespace's Code Block (or Embed Block) lets you paste raw HTML.

1. Click Edit on your page.
2. Add a Code Block (not a Video Block) where you want the player.
3. Paste the <iframe> embed code from your video host.
4. Make sure the "Display Source" checkbox is unchecked.

This is useful when you want to pass specific parameters. For example, to force a YouTube embed to autoplay without sound:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" allowfullscreen></iframe>

The downside is the same as with Video Blocks: YouTube and Vimeo embeds still load heavy external scripts that slow down your page and display third-party branding. In our testing, a single YouTube iframe adds 500KB–1.2MB of extra resources to your page load.

Method 3: Background Videos (For Hero Sections)

Background videos play silently behind your text and buttons — they're designed for visual impact on hero sections and landing pages. Squarespace treats them as decorative elements, so they're automatically set to autoplay, mute, and loop.

Step-by-Step: Adding a Background Video

1. Click Edit on your page.
2. Hover over the section (banner) and click the pencil icon (Edit Section).
3. Navigate to the Background tab.
4. Select Video and upload a file or paste a YouTube/Vimeo link.
5. Upload a Mobile Fallback Image — this is critical because most mobile browsers won't play background video at all.

Background videos are limited to 60 seconds — Squarespace will crop anything longer. Keep file sizes small (under 10MB if possible) and stick to 720p for background loops. A large background video can seriously hurt your Core Web Vitals scores.

Method 4: SmartVideo via Code Block (The Professional Way)

The native methods cover basic use cases, but they all share the same fundamental problem: Squarespace is a website builder, not a video host. If you need unlimited video length, no third-party ads, adaptive bitrate streaming, and fast load times, you need a dedicated video platform.

We built SmartVideo specifically for this use case. It works on Squarespace by adding a small script to your site header, then using a custom <smartvideo> tag wherever you want a player. Here's the full setup:

Installing SmartVideo on Squarespace

Step 1 — Add the script. In your Squarespace dashboard, go to Settings → Advanced → Code Injection → Header and paste the SmartVideo snippet from your Swarmify dashboard. This is a one-time setup — it loads asynchronously and won't block your page from rendering.

Step 2 — Add video with a Code Block. On any page, add a Code Block and paste a SmartVideo tag:

<smartvideo src="https://your-video-url.mp4" width="1280" height="720" class="swarm-fluid" controls></smartvideo>

Key attributes you can use:

• class="swarm-fluid" — Makes the player responsive (scales with browser window)
• controls — Shows play/pause/volume controls
• autoplay muted — Auto-starts playback (requires muted per browser policy)
• playsinline — Prevents iOS Safari from hijacking to fullscreen
• poster="thumbnail.jpg" — Custom thumbnail before playback

For a complete reference, see the SmartVideo tag options guide.

Bonus: If you already have YouTube or Vimeo embeds on your Squarespace site, SmartVideo can auto-convert them to the clean player — no manual swapping required. Background videos get the same treatment.

Squarespace Video Methods Compared

Common Video Problems on Squarespace

Before we get to the FAQ, here are the issues we see most often when helping Squarespace users with video:

• Video won't autoplay: Browsers require muted video for autoplay. Check your Video Block settings or add muted to your embed. Our Squarespace autoplay guide has the full walkthrough.
• Background video shows grey on mobile: Upload a Mobile Fallback Image in the section settings. Mobile browsers don't play background video.
• Video is slow to load: Compress your video before uploading. For embeds, use a lazy-loading solution or a video CDN.
• YouTube "related videos" showing competitors: This is baked into YouTube's player. The only way to remove it is to use a different host — see our video hosting platform comparison.

Frequently Asked Questions