Back to posts
How to embed borderless, autoplaying, looping videos on Squarespace

How to embed borderless, autoplaying, looping videos on Squarespace

Tips on how to best embed borderless videos on squarespace

Justin Wyne / May 14, 2018 / Updated October 12, 2024

Updates

Update October, 2024 - I've since migrated this website off of Squarespace, but this content is relevant to most sites. Read more about my migration from SquareSpace to NextJS here.

Updated March 28, 2023 - Added a shortcut to use Custom CSS file upload in Step 2 and bypass AWS.

Updated June 18, 2020 - Added more details on Handbrake and basic S3 usage.

Updated June 8th, 2020 - Added details from reader feedback regarding “playsinline” attribute for additional compatibility.

Updated May 4th, 2020 - Added details from reader feedback regarding “muted” attribute for additional compatibility.

Example output

As a preview of what this post accomplishes, here's a borderless, autoplaying, looping video embedded below.

Background

I've tried embedding videos from other video services like YouTube or Vimeo, but they all put some kind of branding or controls. GIFs work nearly everywhere, but they're terrible quality and huge file size.

For example, here's what the most minimal version of a YouTube embed looks like; using modestbranding=1 and frameborder=0

What you'll need

This approach is a little more involved than just embedding a YouTube video, but from my trials it provides the best experience.

  1. A Squarespace account - for obvious reasons.
  2. Handbrake - For transcoding your video into the right format.
  3. (optional with workaround in Step 2) An AWS account for Amazon S3 (or an equivalent alternative) - For hosting your video file

Step 1: Encode with Handbrake

Handbrake is a great open source tool for transcoding video files, which we'll use to get our video into the correct format for the web.

Click the button below to download the preset I use for encoding videos. They're web optimized and will be 720p, but you can adjust that to your needs.

Import Preset

Presets
Open Handbrake and click the 'Presets' button in the top right. Click the gear at the bottom and choose 'Import'.
Preset Select
Once imported, you should see “Squarespace 720p” now in your list. We'll come back to this in a second.
Preview
Drag and drop your video anywhere onto the handbrake window. It should then show you a preview.

Apply Preset

Once your video is loaded, open the “Preset” window in the top right again, and select “Squarespace 720p”. You'll notice some of the values in the main window will have changed.

Apply Select
Handbrake Rename
Rename the output file so you don't overwrite your original video.
Handbrake Start
Click “Start” to transcode your video into a web-compatible format.
Video Sizes
At this point, you now have a very small video that's ready for the web!

Step 2: Get a public URL for your video

Update March 2023: As suggested by a commenter, you can upload your file to the Custom CSS function of squarespace (Design > Custom CSS > Manage Custom Files) and get a URL from there. Then you can skip to step 3.

The most reliable way to do this is to host your video on S3. Log into AWS, choose s3, then upload your video to a bucket, then get the public url for your video.

Create a new “Bucket” to upload your video to.

Select S3
Create Bucket
Bucket Name
Public Access
UNCHECK the “Block all public access”
Acknowledge
Check the box to acknowledge. Then continue through the rest of the steps with defaults.

Step 3: Embed it

June 18, 2020 Note: I realized that you can also just use the “Code” block to paste the same code below. You don't need to use the Embed Block workaround unless you're also linking to javascript sources.

  1. Choose the "Embed" Block
  2. Click the </Row> to embed manually
  3. Paste the snippet below, customizing the urls from earlier
Embed
Choose "Embed Block"
Embed Manual
Click </> to embed manually
Block
Paste code below
Code
 
1
<video style="width: 100%" loop autoplay playsinline muted src="URL_HERE">
2
<source type="video/mp4" src="URL_HERE" />
3
</video>

For more information on what the ‘playsinline' attribute does, check out this post on css-tricks.com.

End Result

What's cool is that this should work with any content block placement and is even responsive. Below is an examples of how that works.

One downside I haven't addressed yet is that all sizes use the same resolution video. But I'm ok with that for now as I keep most videos pretty small and short.