How To Make Any Video Vertical On Squarespace

1 Jul

Vertical video is everywhere right now — from TikTok to Instagram Reels to YouTube Shorts. So when you go to embed portrait-style videos on your Squarespace website, you'd expect them to look just as good.

But by default, Squarespace adds black bars (or negative space) to the sides of vertical videos. It can look a bit off — especially when you're aiming for a polished, modern layout.

In this quick tutorial, I’ll show you how to make vertical videos fit beautifully in Squarespace using a small snippet of CSS. No plugins or third-party tools needed.

Code.sqs-native-video .native-video-player {

padding-bottom: 100% !important;

}

The Problem: Squarespace Doesn’t Handle Portrait Video Well (Yet)

Squarespace video blocks are designed to maintain a 16:9 ratio, which works perfectly for landscape videos. But when you upload a portrait video (often 9:16), it sits awkwardly in the middle of the block — with big empty spaces either side.

Even if you try stretching the section height, the video doesn’t adjust.

The Fix: A Bit of Custom CSS

To get your portrait video displaying correctly, we’ll use a CSS trick that adjusts the aspect ratio using padding-bottom.

Here’s how:

Go to your Squarespace Custom CSS panel:
- From the Home Menu: Design → Custom CSS
Paste in the code: ( Located at the top of this blog post)

This forces the video container to match the taller portrait ratio, giving your vertical content the space it needs.

Adjusting the Ratio

If your video still feels a little squashed or stretched, you can tweak the padding-bottom value.

100% works well for most portrait videos.
Try 120% if it needs more height.
Avoid going too high (e.g. 150%), or you’ll create too much space below the video.

Don’t Forget to Save

Once you’re happy with how it looks, make sure to click Save before leaving the CSS editor.

Real-World Example: Testimonial Layouts

This trick is perfect for showcasing testimonials or social-style content on your website. You can line up vertical videos side by side, add headings and text, and create a layout that feels familiar to visitors coming from TikTok or Instagram.

Bonus: Looks Even Better on Mobile

Most users are used to seeing vertical video on their phones — so giving them a similar experience on your site improves engagement and keeps your design feeling up-to-date.

If this was helpful, feel free to explore more tutorials on the blog — and if you’re looking for a Squarespace expert to design your site properly from the start, get in touch with me here →