How to Add Vertical Video to Squarespace

Squarespace has no native setting for vertical video, so video blocks default to a 16:9 frame with your Reel or TikTok letterboxed inside it. The fix is a short CSS rule targeting that block's ID and setting a 9:16 aspect ratio.

Why vertical video looks wrong by default

Squarespace video blocks assume landscape. They build a 16:9 frame and fit your video into it, which is fine for anything filmed horizontally.

Give it a 9:16 vertical video and the video shrinks to fit the height of that wide frame, leaving big empty bars either side. The video is playing correctly, it's just sitting in the wrong shaped box.

Since most short-form content now comes off Instagram, TikTok and YouTube Shorts, this comes up constantly, and there's still no toggle for it.

Adding the video block first

Click Edit on your page, go to the section you want, and add a Video Block.

Upload your file or paste the link. You'll see the horizontal frame problem immediately.

Save and exit the editor. The CSS comes next, and you need the block in place first because you're going to target it specifically.

Finding the block ID

This is the step most guides skip, and without it the code won't work.

block-yui_3_17_1_1_abc123. You need yours so the CSS changes only this video and not every video on the site.

block-. Copy the whole thing.

If you'd rather not use the inspector, there are free Squarespace browser extensions that show block IDs on hover, which is quicker if you do this often.

The CSS to paste

Go to Website, then Website Tools, then Custom CSS, and paste this in.

/* Replace block-yui-abc123 with your own block ID */
#block-yui-abc123 .sqs-video-wrapper,
#block-yui-abc123 .plyr__video-wrapper,
#block-yui-abc123 .sqs-native-video {
  aspect-ratio: 9 / 16 !important;
  padding-bottom: 0 !important;
  max-width: 400px;
  margin: 0 auto;
}

block-yui-abc123 for the ID you copied, keeping the # in front of it.

The three selectors cover the different wrappers Squarespace uses depending on whether the video is uploaded or embedded, so leaving all three in means it works either way.

max-widthmargin: 0 auto centres it.

Click Save and reload the live page.

Doing it for several videos

Repeating this block by block gets tedious fast if you're building a Reels wall.

A cleaner approach is to put all the vertical videos in one section, give that section an ID, and write one rule targeting every video block inside it. Then adding a fourth or fifth video needs no new CSS.

That's the setup I'd build for a client wanting a social feed style section, along with proper spacing and mobile behavior. It's a small code support job and much more maintainable than a growing list of block IDs.

Frequently asked questions

Does Squarespace support vertical video natively?

No. Video blocks use a 16:9 frame with no aspect ratio setting, so vertical video gets letterboxed until you add CSS.

Where do I find my Squarespace block ID?

Right-click the block on the live page, choose Inspect, and look for an id starting with block- on the element or its parents. A Squarespace block ID browser extension does the same thing faster.

Why did my CSS not work?

Usually the block ID is wrong, or you left off the # in front of it. Also check you're viewing the live page rather than the editor, and that your plan includes Custom CSS.

Can I do this without code?

Not properly. You can crop the video to 16:9 before uploading, but that defeats the point. Displaying true vertical video needs the CSS.

Want a proper vertical video section built once so you can drop new clips in without touching code? Book a free call.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.