How to upload and get video links on Squarespace

In our previous post, we discussed leveraging Lightboxify URLs in the Gallery section's image clickthrough to enable Squarespace video lightbox with Lightbox Studio. This post will guide you through various methods to upload videos to Squarespace and obtain their links.

Upload videos to Squarespace

Method 1: Upload videos via Custom CSS panel

Supported File Extension: MP4
File Size Limit: 20 MB

1. Access the Custom Files:

   • Go to Website > Pages > Website Tools > Custom CSS.

   • At the bottom of the Custom CSS menu, click the Custom Files button.

2. Upload the Video:

   • Click Add images or fonts.

   • Select your MP4 video file from your computer and click Open.

3. Get the Video Link:

   • Move the cursor to the top of the Custom CSS panel

   • Once the video is uploaded, click on the video within the Custom Files menu.

   • The URL/address of the video will appear at the top of your Custom CSS window.

   • Copy this URL for use in your gallery lightbox, you may want to delete the URL to prevent syntax error.

View fullsize

Upload videos to Custom Files

Method 2: Upload Video via Link Editor Panel

Supported File Extensions: MOV, MP4, OGG, etc.
File Size Limit: 20 MB

1. Access the Link Editor:

   • After adding a gallery section, you can add images to it

   • Select the gallery image, focus on Link field.

   • Click the gear icon to open the Link Editor popup.

2. Upload the Video:

   • Go to the File tab.

   • Click Upload File and select your video file.

   • Once uploaded, check the checkbox next to the video file name and click Save.

3. Get the Video Link:

   • In the Link field, a URL link will be generated starting with /s/.

   • Since your are uploading video and selecting it directly in the Link field already, no need to copy the video link.

Upload videos file

Insert videos to Link field

Method 3: Upload Video to Asset Library

Supported File Extensions: MOV, MP4, OGG, etc.
File Size Limit: See more (can upload larger than 20 MB, limited by your billing plan's total length of all uploaded videos)

1. Access the Asset Library:

   • You can upload videos via the section background, video block, or directly into the asset library.

2. Upload the Video:

   • Follow the prompts to upload your video file to the asset library.

3. Get the Video Link:

   • This method is a bit tricky and not supported yet, it will be addressed in a later post. Update: check this post for details How to Find the Direct URL of Squarespace hosted videos

   • By getting the Squarespace hosted videos links, you can insert it into ClickthoughURL and play videos on lightbox.

   • Note: To make Squarespace hosted videos accessible, ensure they are used somewhere on your page, making them active assets.

Upload video to video block

Method 4: Adding Videos from Hosted Services

You can easily add individual videos from popular video hosting platforms like YouTube or Vimeo.

Currently, it's not possible to add a video playlist to a video block on Squarespace

• Find the video you want to use in a separate tab of your web browser.

• Copy the URL from your browser's address bar or the Share area, depending on your video host.

Use Youtube

• Upload your video to Youtube.

• Copy the URL of the uploaded video from Youtube.

Get Youtube video URL

Use Vimeo

• Upload your video to Youtube.

• Copy the URL of the uploaded video from Youtube.

Get Vimeo video URL

Config player playback via URL parameters

When integrating videos into your Squarespace gallery sections, you can enhance playback by using URL parameters. These parameters allow you to control various aspects of the video player behavior.

Supported URL Parameters for Video Files (mp4, ogg)

These URL parameters are supported autoplay loop playsinline controls muted

Details can be found on this post.

Supported URL Parameters for other providers

• Vimeo URL: See Vimeo embed options.

• YouTube URL: See YouTube embed options

Video playback parameters

Stop the video links open in lightbox

To make the clickthrough URL redirect instead of opening the video lightbox, append the URL parameter lightboxify=false.

Disable video links with lightboxify params

Insert Video URL into Image Clickthrough

Once you have the video URL with the appropriate playback URL config, head to the slide's clickthrough URL and copy the video links there.

Note to reader: if you used method 2 to insert video link from the Link Editor panel, the video links will be available on Image link field already

Insert video URL into image clickthrough

Example

The website below is using Gallery Grid section to display Images and videos in Gallery lightbox thanks to Lightbox Studio, now visitor can pinch-to-zoom images and play videos on lightbox at the same time!

Squarespace video lightbox example