Looping Videos on Squarespace

It's not an understatement to say that this changes everything.

I've been looking for a way to loop videos on this site for literally years. And now I've discovered a way to do just that, without relying on an external service, and with no pesky user controls covering the video to boot.

Artboard 2.png

Just a few nights ago instead of sleeping I decided to stay up to work on my Wavy Surface blog post. I looked up something I hadn't in the past - instead of "how can I loop videos on Squarespace" and getting a ton of results for looping banners and backgrounds, I looked up "embed webm Squarespace" and it led me to this reddit post.

On that thread, /u/feature_creep was a godsend and suggested this link in response to another redditor looking for help. However, when another redditor asked where a video file could be hosted he backpedalled and fell back on suggesting an embedded YouTube video instead. But when I looked at that provided link, it was all I needed to realize that it's actually possible to host and display videos all within Squarespace—if they're 20mB or smaller. You can copy and paste the code below as reference.

 
<video muted
       src="https://squarespace.com/s/yourfile.mp4"
       width=100%
       autoplay
       loop>
    Sorry, your browser doesn't support embedded videos.
</video>

The trick is a little roundabout. Copy and paste the code above in to a Code Block. Instead of using an external link to embed into your site, you can upload a video file to Squarespace by going through the "Link" menu (this is why there's the 20mB limit). You can then use that to get the URL address for where your file is stored, and then use it in place of an external link. You can also edit attributes to add controls, mute, autoplay, and loop your videos too. The end result is the stuff of dreams (my dreams, anyway).

Artboard 1.png