This post is a collaboration with BeyondSpace.studio

How Squarespace Delivers Your Videos

When you upload videos to Squarespace, they’re delivered through HLS format in various sizes. This enables Squarespace to deliver the ideal video tailored for each of your visitors. Simple enough, right? But if you're curious about the inner workings of this process or need a tool for grabbing video URLs easily, keep reading!

Understanding HLS Streaming

HLS streaming is a popular method for delivering video content across the internet. It works by breaking the video file into smaller chunks and serving them over HTTP. This allows for adaptive streaming, meaning that the quality of the video can change based on the viewer's internet speed and device capabilities.

When you upload a video to Squarespace—whether through a Video Block, Section Background, or Video Page—it's processed into multiple variants with different bitrates and resolutions. These are:

• 360p

• 1080p

This multi-resolution approach ensures that viewers with slower connections can still enjoy smooth playback without buffering issues.

HTML5 video element

Videos can be played in a browser using the HTML <video> element. When you specify the video source (such as .mp4, .webm, or .ogg) within the video tag, the browser begins downloading the video and will start playing it once enough data has been buffered.

If a user seeks ahead in the video, playback will only resume once all preceding bytes have been downloaded and played.

Here’s a basic example of the <video> element:

Key Points about HTML5 Video:

1. Single Source Download: In HTML5 video, only one version of the video source is downloaded at a time, regardless of the user's screen size.

2. Resource Management: If the video source dimensions exceed the screen size, the device must eliminate pixels to render the video accurately. This can lead to increased CPU and battery usage.

3. Network Limitations: If the video bitrate exceeds the available network bandwidth, playback may be disrupted, causing interruptions or stalling.

Squarespace video stream

When you upload videos to Squarespace, they are delivered via streaming. This streaming process involves the following key components:

The Master Playlist (playlist.m3u8)

The initial file sent to the video player is the master manifest file, usually referred to as playlist.m3u8. This file serves as a 'list' that showcases all the streams available for the video. Each stream version is listed separately, usually arranged from the lowest quality to the highest.

Let’s dig deeper into the last 2 line, where it contains the definition of the fullHD stream (1080p)

In this example:

• BANDWIDTH: The required bandwidth to play this stream is approximately 3.09 Mbps.

• CODECS: The video codec is avc1, and the audio codec is mp4a.

• RESOLUTION: The resolution is 1870x1080.

• The link provides access to the manifest for this stream, which will detail each segment's length and location.

Single Stream File

If we download the full HD stream file from the playlist.m3u8, we can see how the video is structured and delivered for efficient streaming.

At its core, a video stream is generated by dividing the video into smaller pieces known as segments. These segments are typically identified by a format associated with their encoding, such as MPEG-TS. The organization and naming of these segments are documented in a manifest file, usually with the .m3u8 extension, eg: mpegts-h264-1870:1080.m3u8

Below is the breakdown of the stream:

Header Information:

• #EXTM3U: This line indicates that the file is an extended M3U playlist.

• #EXT-X-VERSION:7: This specifies the version of the playlist format.

• #EXT-X-TARGETDURATION:8: This indicates that the maximum segment duration should be 8 seconds.

• #EXT-X-MEDIA-SEQUENCE:0: This shows the sequence number of the first segment.

• #EXT-X-PLAYLIST-TYPE:VOD: This indicates that the playlist is for video on demand.

• #EXT-X-KEY:...: This line specifies the encryption method (AES-128)

Segment Information:

• #EXTINF:8.066667,: This line indicates that the first segment has a duration of approximately 8.07 seconds.

  • #EXT-X-BYTERANGE:1742208@0: This specifies that the segment will be delivered as a byte range starting from the beginning (0) with a length of 1,742,208 bytes. The URL following this line points to the segment data.

• The subsequent #EXTINF and #EXT-X-BYTERANGE lines provide information about additional segments, including their durations and byte ranges.

Fast Forwarding

As previously mentioned, when working with MP4 files, skipping ahead requires downloading all prior content. However, with video streams, the player can intelligently request only the necessary segments.

Given the fullHD segment m3u8 playlist above: If you seek to t=13 seconds, the player evaluates the segments as follows:

1. First Segment: Covers from t=0 to approximately t=8.07 seconds.

2. Second Segment: Covers from t=8.07 to approximately t=12.87 seconds.

Since t=13 seconds is beyond the total duration of the first two segments, the player recognizes that it needs to access the third segment:

• Third Segment: Starts at t=12.87 seconds and continues until its duration completes.

Therefore, the player can skip downloading the first two segments (0–12.87 seconds) and immediately request the third segment, which ensures a smoother playback experience without unnecessary buffering. This efficient handling allows users to seek ahead quickly and minimizes load times.

Adaptive streaming on Squarespace

The power of adaptive streaming shines brightly when using Squarespace’s video capabilities. With HLS (HTTP Live Streaming), the video player can dynamically adjust the quality of the stream based on real-time network conditions.

When a viewer starts watching a video, the player assesses the available bandwidth and begins playback with the most suitable resolution. If the network speed fluctuates, the player can seamlessly switch between different quality levels.

For example, when I simulated a 3G network speed, the player automatically switched from 1080p to 360p to ensure smooth playback. This seamless transition allows viewers to enjoy content without interruptions.

Check the screenshots below for a visual reference of this adaptive quality adjustment in action:

1. No Throttling Mode: The 1080p segments have been loaded.

2. Network Throttled to 3G Speed: The 360p segments have replaced the 1080p counterparts.

Limitations of Video Streaming on Squarespace

Videos uploaded to Squarespace can automatically display at either 1080p or 360p based on the user's device, browser, and internet connection. However, there is no option for users to manually select which resolution to display. This lack of control can lead to situations where the background video appears blurry on mobile devices.

It's important to note that while you can upload 4K videos to Squarespace, they will be resized and displayed at a maximum resolution of 1080p.

Every Squarespace website can have up to 30 minutes of uploaded video. If you need more storage, subscribe to a Digital Products plan. For more information about Squarespace's video requirements, check this page.

If you're interested in exploring other methods for uploading video to Squarespace, refer to this detailed tutorial from the Beyondspace blog.

Accessing the playlist URL for Squarespace videos

Now that you have a solid understanding of Squarespace streaming, you might see why the URLs for uploaded videos no longer appear in traditional formats like MP4 or OGG. Instead, they are provided in HLS format, which allows for adaptive streaming and better performance across varying network conditions.

You may find yourself in a variety of situations where grabbing the URL for your videos becomes useful. For instance, if you want to share it with colleagues/clients for collaboration, having direct access to the HLS video URL simplifies the process. Moreover, if you're a developer looking to integrate videos into a custom application or solution on your Squarespace website, accessing the HLS URL can be incredibly beneficial. This capability enhances your flexibility and control over how and where your video content is used.

Asset library enhancer

Beyondspace has introduced a free tool called Asset Library Enhancer, featuring a unique capability that allows you to copy the URLs of videos and images uploaded to Squarespace directly from the context menu. This enhancement is designed to streamline your workflow, making it easier than ever to access and share your media files seamlessly.

How to use the new Copy URL feature:

1. First, copy the snippet for the Asset Library Enhancer into your Footer injection.

2. Go to your site's Asset Library at /config/asset-library from your Squarespace dashboard.

3. Ensure the Library Layout is set to List.

4. Click on the Context Menu of Each Row Item to access the Copy URL button: For each image or video, click on the three dots (context menu) next to the item to find these options.

   • Copy Image URL: This will grab the image link and video thumbnail URL to your clipboard.

   • Copy Video URL: This will grab the real URL of the video to your clipboard. Note that if the video is not used anywhere on your page, the video URL may not be usable. In such cases, you may see a message indicating that the video is not playable and suggesting you embed the video elsewhere to make the URL accessible.

Conclusion

HLS has a number of advantages over the native HTML5 <video> tag. Responsive by default, it ensures that less data is wasted by serving a video that is too large for a small screen. Additionally, its adaptive capabilities mean that fluctuations in network speed are less likely to impact playback quality.

Squarespace uses HLS under the hood. Every video creation response includes the m3u8 URL for the stream, so the small tool from Beyondspace can help you quickly grab those playlist URLs of videos and use them for your own needs.