How to embed borderless, autoplaying, looping videos on Squarespace

How to embed borderless, autoplaying, looping videos on Squarespace

I've recently migrated my domain from a Jekyll-backed S3 to Squarespace. It took me a while to find an alternative solution that had all the support I wanted. One of those requirements was to embed autoplaying borderless and looping videos in the page.

Alternatively, you can use GIFs but they're terrible quality and huge file size.

What you'll need

  1. An AWS account for Amazon S3 (or some other place to host your video)

  2. A Squarespace account

  3. Handbrake

Step 1: Encode

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.

Export your video with that preset.

Step 2: Get a public URL for your video

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.

Step 3: Embed it

  1. Choose the "Embed" Block

  2. Click the "</>" to embed manually

  3. Paste the snippet below, customizing the urls from earlier

<video style="width: 100%"
  loop="" autoplay=""
  src="URL_HERE">
    <source type="video/mp4" src="URL_HERE">
</video>

End Result

What's cool is that it should work with any content block placement and is even responsive.  Below are a couple examples of how that works. Each one is the exact same embed block.

The only 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.