Justin WyneComment

How to embed borderless, autoplaying, looping videos on Squarespace

Justin WyneComment
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

Step 1: Get a public URL for your video

The most reliable way to do this is to host your video on S3. Do that, then get the public url for your video.

Step 2: 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.