Vertical video has taken the social media world by storm, and so many of us Squarespacers want to share this format on our websites! Squarespace video blocks aren’t designed to handle this (yet) but with a little clever CSS, you can change your video block to support a 9:16 vertical video format.

I’ve got the step by step instruvctions and code below, and created a tutorial video so you can see these codes in action! 🙌

Here are the steps to creating a vertical video in your Squarespace site

Step 1: Add This Code To Your Custom CSS

The first thing you’ll need to do is access your site’s custom CSS. To do this, go to Website → Pages → Website Tools → Custom CSS and paste the following code:

Step 2: Adjust the code to fit your video ratio

This code will resize all video blocks on your site to be a 9:16 ratio instead of 16:9. You can change this too!
Adjust the 120% in the code above to fit your specific video.

Step 3: (Optional) Add the block ID to change one video at a time

If you want to change the size of only one block at a time, you can start your code with the block ID for that specific video, like this:

Record scratch 💥 what’s a block id?!

Everything in Squarespace gets a unique ID number, including video content blocks. You can use this in your code to tell a computer browser to only use the code on that specific thing. I use a free Chrome extension to quickly grab that info (not affiliated - just a fan) Here is an article with more info on how to find the Squarsapce block ID for your own content.

Other Squarespace tutorials you might enjoy

Beginners guide to Squarespace video blocks

New Video Block Options in Squarespace

How to embed an Instagram reel into Squarespace

Did you find this helpful?

Support my blog with a donation on buymeacoffee!