Applet Studio

View Original

How to Add Videos to Your Squarespace Website


Learn to upload and embed videos to your website


Picture this: You're browsing a website, and instead of static images and plain text, a beautifully crafted video starts playing, instantly drawing you into the content. It's dynamic, it's engaging, and it effortlessly conveys a story, message, or product like no other medium. That's the magic effect you can offer visitors by adding videos to your Squarespace website.

In this blog post, we're going to dive deep into how to add videos on Squarespace and go over the various methods to either upload or embed them into your site. 

Ready? Lights, camera, action!


How to Upload Videos to Squarespace

There are three main ways in which you add videos to your Squarespace website:

  1. Video Blocks: How to Upload Video to a Squarespace Video Block

Squarespace works with blocks — simple drag-and-drop sections that allow you to add content to your website. There are different types of blocks depending on the type of content you want to add, including video blocks. 

A video block allows you to add a video to any section of your pages without hassle. Although these blocks allow you to integrate videos from YouTube or other third-party video platforms, they also work if you have the video saved on your laptop or device.

Follow these steps to add a video block: 

  1. Click Edit the page and choose the section where you want to add your video

  2. Head to the editor, click Add block or an insert point, and then click Video.

  3. Click the pencil icon on the block to open the block editor.

  4. Add your video by uploading the file or pasting the URL.

  5. Add a custom featured image (It will display over the video before it’s played.)

  6. Add a caption for the video.

  7. Your changes save automatically, so just click outside the video editor when you’re done.

Here are some key tips you should keep in mind when creating a video block on Squarespace: 

  • You can upload up to 30 minutes of high-resolution video directly to your Squarespace site for free. 

  • Uploaded video files need to meet Squarepace’s video file requirements:

    • Only .mp4, .m4v, .mov formats

    • 500 MB limit

    • 30-minute limit length

    • 360p minimum resolution

    • 1080p maximum display resolution and 4K maximum upload resolution

  • Videos of any aspect ratio will display, but you should try to upload 16:9 videos, as most display in a player with that aspect ratio.

2. Videos Pages: How to Upload a Video to a Videos Page on Squarespace

Videos pages on Squarespace are collection pages where you can add your series of individual videos and extra information. It’s essentially like a blog page for videos. They are a great fit for coaches offering courses or workshops or professionals looking to create an engaging portfolio.

On video pages, you can embed videos from third-party sites or upload your own. As you add your videos, they are organized like blog posts, and each individual video will have a featured image and a description. When the visitor clicks on the video, another page opens up to display the content.

It’s quite easy to create a videos page:

  1. Open the Pages panel, then click + beside the navigation section where you want the videos page to appear.

  2. Under Collections, click Videos.

  3. Select the layout you want for your video page. You can change it later on.

  4. Enter a page title and press Enter.

  5. In the videos page’s settings, you can edit the page’s title, URL, and SEO, and manage the categories for your individual videos.

Once you’ve created a videos page on your website, it’s time to populate it with content. You can add a video to your videos page by either uploading a video file directly to your site or embedding a video hosted on another platform. Here’s how:

  1. Click the videos page and click + in the side panel.

  2. In the Content tab, add a title for your video (100 characters or fewer)

  3. Click Add a video, and then there are three options:

    1. To upload a video file directly to your site from your laptop or device, click Upload File

    2. To reuse a video you’ve previously uploaded to Squarespace, click Select from library.

    3. To embed an externally hosted video, like a video from YouTube or Vimeo, click Add from link and then paste the URL and click Save.

  4. You can edit the video’s title, categories, SEO, and publication status.

  5. Save.

And you’re done! As you can see, it’s quite easy to add videos to your Squarespace website. However, keep these things in mind:

  • You can’t add blocks to the videos section of a video page, but you can add block sections above or below it.

  • You can upload up to 30 minutes of high-resolution video directly to your Squarespace site for free. 

  • The Enterprise plan offers unlimited video storage. 

  • Uploaded videos need to meet Squarespace’s video file requirements for video pages:

    • Only .mp4, .m4v, .mov formats

    • 5000 MB limit

    • 3-hour limit length

    • 360p minimum resolution

    • 1080p maximum display resolution and 4K maximum upload resolution

  • When adding videos from third-party platforms, the quality and resolution of the streamed videos are the responsibility of the video hosting provider.

3. Background Videos: How to Add a Background Video on your Squarespace Website

On Squarespace, you can add background videos to your website sections to spice up the design with dynamic visual effects. These videos play on a loop and don't have sound, but they add a nice touch to your site.

You can include YouTube and Vimeo videos on page sections, banners, and other sections, depending on the Squarespace version you’re using. Also, you can upload your own videos to section backgrounds in Squarespace 7.1.

Here’s how to add a background video to your Squarespace sections:

  1. Head to the page in the section you want to edit.

  2. Click the pencil icon and then Background.

  3. Click Video and the + icon. Now upload the video from your computer or paste its URL.

  4. Edit the video settings and click Save.

Things to keep in mind when uploading your background video:

  • Squarespace advises to keep your video length under 40 seconds.

  • Ensure high-quality display with a resolution of 1080p and a bitrate of at least 3 Mbps.

  • Use videos with a smooth transition and smaller panning. 

  • If you’re using YouTube videos, disable overlay ads to keep the ads from interfering with your background videos.

  • Don’t add more than two background videos per page to reduce your page size.


Embedding Videos on Squarespace

As we mentioned above, you can embed videos from third-party video hosting sites on Squarespace. Now, how you embed videos depends on your video host: For videos hosted on YouTube or Vimeo, you can use the video URL. On the other hand, for videos hosted on Animoto or Wistia, or to use advanced playback options for any video host, you’ll need an embed code to add to an embed block.

Although the process to embed YouTube or other third-party videos on Squarespace is quite easy, there are several things you need to keep in mind:

  • Video pages and background videos only support YouTube and Vimeo for embed options.

  • If you have hidden or unlisted videos that are accessible by links or embed codes, you can display them on your site regardless of whether they are not public.

  • You can add 360-degree videos to video and embed blocks, but they may affect your site's speed and display.

  • It is possible to add live-streaming videos from YouTube and Vimeo by adding the URL to a video block or the embed code to an embed block.

  • You can add YouTube shorts by right-clicking on the video, copying the embed code, and adding it to an embed block.


Where You Can Add Your Videos on Squarespace 7.1

Where you can add videos depends on your site's version.

  • Squarespace Version 7.1. You can add videos to videos pages, video blocks, embed blocks, gallery blocks (some site areas), section backgrounds, and lock screen backgrounds. Gallery sections don't support videos in this Squarespace version.

  • Squarespace Version 7.0. You can add videos to video blocks, embed blocks, gallery blocks, gallery pages, banners (some templates), project pages (York template family), cover pages, and lock screen backgrounds.

Adding videos to your Squarespace website isn't just a savvy move; it's almost a necessity. Our attention spans are getting shorter by the hour, and videos help engage visitors faster than any other type of content. They captivate your audience and convey your message with unparalleled impact.

So, don't miss out on the opportunity to elevate your Squarespace website with video content and turn it into a captivating experience that keeps visitors coming back for more.


Shop Squarespace Templates:

See this gallery in the original post