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.
- A Squarespace account - for obvious reasons.
- Handbrake - For transcoding your video into the right format.
- (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
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.
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.
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.
- Choose the "Embed" Block
- Click the </Row> to embed manually
- Paste the snippet below, customizing the urls from earlier
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.