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
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
Choose the "Embed" Block
Click the "</>" to embed manually
Paste the snippet below, customizing the urls from earlier
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.