Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Adding videos to your Squarespace site

You can add videos to:

  • Video Blocks
  • Gallery Blocks
  • Gallery Pages
  • Cover Pages
  • Banners on some templates

This guide reviews the different options for adding videos to your site.

You can embed videos (not upload directly)

Squarespace supports embedding videos from YouTube, Vimeo, Animoto, and Wistia. These services are highly respected for their streaming quality, upload ease, and video playback control.

For these reasons, Squarespace only offers built-in options for embedding videos. We don't support direct uploads. This helps your site load faster, enables visitors to share your videos, and provides multiple options for video hosting.

Hosting your video

Before embedding a video on your site, upload the video to a supported external hosting service. Click the links below for their instructions:

Ensure that your video isn't set to private on your host's page, as only public videos will render properly on your site.

Note: Background videos only support YouTube and Vimeo.

Add a video to a page

You can add individual videos to a Regular Page, Cover Pageblog post, or any other editable blocks area.

This table covers the different ways you can add videos to one of these areas.

Video Block

  • One video per block.
  • Videos play with sound when clicked
  • You can set them to autoplay

Gallery Block

  • Multiple videos in a grid, slideshow, carousel, or stack
  • Can mix with static images
  • Videos play with sound when clicked
  • You can set them to autoplay

Summary Block

  • Pulls videos from a Gallery Page to display in a grid, slideshow, carousel, or stack
  • When clicked, the video opens in a lightbox and plays automatically, with sound
  • Filter by category or tag
  • Ensure every video has a thumbnail image for best results

Video banners

  • Available in some templates
  • Videos play automatically, without sound, and loop

Cover Pages

  • Available in some layouts
  • Plays in a lightbox with sound when clicked

Add videos to a gallery

Every template supports adding Gallery Pages to showcase your images and videos.

The style, layout, caption display, and behavior of your Gallery Page depends on your template. For example, the Wexley template opens image and videos in a lightbox.

  • Most Gallery Pages have more than one layout option.
  • You can move images and videos from one Gallery Page to another.
  • Pull videos from a Gallery Page into a Summary Block to filter by category or tag
  • Videos play with sound
  • Can be set to autoplay

If you don't like your template's Gallery Page, and don't want to switch templates, you can add a Gallery Block to a Regular Page instead. This gives you the option of four layouts: grid, slideshow, carousel, or stacked. To learn more, visit Gallery Blocks vs Gallery Pages.

Add a background video

You can display a video as the background behind page content. There are two ways to do this:

Cover Page

  • Add a Cover Page to your site and give it a silent, looping background video.
  • Background videos are supported for most layouts and can only use YouTube or Vimeo videos.

Site background

  • Some templates support a site-wide background image.
  • For these templates, use a .gif image as your site background. This creates a silent, looping background video.

 

Add a video banner

Some templates support banners, which display at the top of your site.

Video banners

  • Available in some templates
  • Plays automatically and loops
  • No sound
  • Can only use YouTube and Vimeo videos.
  • Displays overlay text
  • Displays a static image only on mobile

Bedford template family

  • Bedford, Anya, Bryant, and Hayden support a special slideshow banner on Regular Pages
  • Doesn't play automatically
  • Includes sound
  • Displays overlay text

Add videos to an Index

The Index Page collects images and content from different pages and arranges them in a slideshow, thumbnail grid, or stacked sections. Index Pages are available in some templates.

Here are ways to use videos with each Index type:

Stacked Index

  • Stack video and .gif image banners.
  • Add content sections with Gallery Blocks or Video Blocks.
  • Some stacked Indexes support Gallery Page sections.

Slideshow Index

  • Momentum supports Galley Page videos in the Index
  • For all other slideshow Indexes, use .gif images to create moving slides.

Grid Index

  • Videos aren't supported in a thumbnail grid. As an alternative, use a .gif image to create moving thumbnail images.
Tip: Some Indexes support additional options, such as page headers with editable block areas.

Video URLs vs. embed codes

Once the video is hosted by a supported service, you can embed it on your site using either a URL or a special embed code. Typically, the video URL is more convenient, while the embed code offers more advanced options.

Video URL

For YouTube, Vimeo, Animoto, and Wistia, you can use the video URL to embed the video on your site. The video URL displays in the browser on the host page.

video-url.png

When uploading to a Video Block, Gallery Block, Gallery Page, or Cover Page, paste this in the Video URL field.

gallery_block.jpg

Embed code

Video hosts provide a special embed code for each video. Using an embed code allows you to:

  • Control advanced display settings
  • Enable autoplay
  • Embed videos from hosts other than YouTube, Vimeo, Animoto, and Wistia
  • Disable Related Videos for YouTube
Note: All video areas support embed code except Cover Page video backgrounds.

The steps to find your video's embed code varies by hosting service. If you can't find your video's embed code, we recommend contacting your hosting service.

Tip: With most hosts, you can customize the embed code. For example, to disable Related Videos on YouTube videos, uncheck Show suggested videos when the video finishes before copying the code.

Here's an example of YouTube's embed code:

embed-code.png

When uploading to a Video Block, Gallery Block, Gallery Page, or Cover Page, click the </> icon in the Video URL field.

Note: Your video host must use the oEmbed standard to work with these blocks and Pages. If it doesn't, paste the code in a Code Block instead.

Paste the embed code in the pop-up window and click Set.

embed-code2.png

In the Edit Video window, you'll see the message "Embed data has been manually set." This confirms that we recognize the embed code.

You can add a thumbnail, title, and description for more customization, and then click Save.

Autoplay

Video banners and .gif images automatically play when the page loads. 

For Video Blocks, Gallery Pages, and Gallery Blocks, you'll need to customize the video's embed code to make the video autoplay. The steps for this vary slightly between services.

For all hosting services, uncheck Use Thumbnail after adding the embed code. Custom thumbnails override the autoplay setting.

Note: If your page has multiple autoplay videos, they’ll all start playing at once (unless you're using Vimeo). Because of this, we recommend using a maximum of one autoplay video per page.
Note: Videos won't autoplay on mobile devices.

uncheck-use-thumb.png

Set a YouTube video to autoplay

To autoplay a YouTube video, add ?autoplay=1 to the end of the URL in your embed code.

Set a Vimeo video to autoplay

Before copying the embed code from Vimeo, click + Show options.

Check Autoplay this video, and the embed code will adjust.

Then add this new embed code to your Video Block. You can also manually add ?autoplay=1 to the end of the URL in the embed code.

Set an Animoto video to autoplay

Animoto has the option to Autostart your video in the Embedded Video tab:

Autoplay in an Index gallery

Only certain Index Pages support autoplay Gallery Page videos. Templates are grouped by family.

  • Momentum
  • Pacific, Charlotte, Fulton, Horizon, Naomi
Note: Grid Index Pages don't support videos in the thumbnail grid, but you can add autoplay videos to Gallery Pages within the Index.

Use animated .gifs

Animated .gif images play automatically, loop, and don't include sound. You can use a .gif anywhere on your site where you can add images, including:

Troubleshooting

Videos take too long to load

If a video takes a while to load, it probably needs that extra time to buffer. Many longer or HD videos require additional time to load, especially if you factor in your internet connection.

Clicking "Play" on a video starts the buffering process. If you pause the video and wait for content to load in the background, you should be able to build up the buffer and play the video with fewer issues.

Related YouTube videos are playing after mine

YouTube displays related videos after a video finishes playing. This is a YouTube feature and isn't controlled by Squarespace. You can disable this by modifying the share URL or using an embed code and disabling the option in the video's Embed settings.

This topic has come up on our Answers forum and you can view the post here.

Vimeo videos aren't playing in HD

To display HD Vimeo videos, use the embed code to add the video, rather than the video’s URL. Uploading 1080p HD videos to Vimeo requires their Plus or PRO membership plan.

Buttons and controls aren’t showing on Vimeo videos

Vimeo enables "Tiny Mode" when a Video Block is less than 300 pixels wide or 170 pixels tall. Tiny Mode hides buttons and additional information, such as the title, control bar, and the Watch Later/Share buttons. To prevent this, visitors can view the Video Block on a larger display.

The fullscreen button isn't appearing or working 

When logged into your site, the Vimeo and YouTube players won't offer a fullscreen option. You can view this by opening the page in a private or incognito window in your browser.

Wistia videos are too small

On Project Pages, Wistia videos display in a smaller frame. To avoid the issue, you can use a different video hosting platform.

FAQ

Do plays on my website count?

Every video service controls when video plays count, not Squarespace. Plays of embedded videos might add to your view count, depending on where the video is hosted:

  • YouTube - Doesn't count views of embedded videos. However, YouTube provides a breakdown of where viewers are finding your videos. Learn more in YouTube Analytics documentation.
  • Vimeo - Vimeo counts views from embedded videos. Learn more in Vimeo's documentation.

For help with other services, visit their documentation.

If Squarespace doesn't support my video host, how do I add my video?

In most cases, we recommend uploading your video to a supported service. If that isn't possible, or if you need to keep it hosted elsewhere, you still have some options.

Any video sharing service that supports the oEmbed standard can be added to these areas using its embed URL or code:

  • Video Blocks
  • Gallery Blocks
  • Gallery Pages
  • Cover Pages

Embed codes can't be added to Cover Page background videos.

If this doesn't work and there's no problem with the embed URL or code (like a typo), it's likely that the video host doesn't support the oEmbed standard. For these videos, you can add an embed code to a Code Block instead. Custom code like this falls outside of the scope of Squarespace support.

Was this article helpful?
24 out of 54 found this helpful
Adding videos to your Squarespace site