Make Video Blocks Portrait on Squarespace
A common question I get, both from clients and in Squarespace forums, is: "How do I make my video vertical or portrait in Squarespace?"
I made a video on this a couple of years ago, but since then, I’ve refined the process and made it even easier to follow. So, here’s the updated, step-by-step guide to displaying vertical videos on your Squarespace site.
The One Key Requirement Before You Start
This method only works for videos uploaded directly into Squarespace’s native video storage.
That means:
You must upload the video file to Squarespace
It won’t work for YouTube Shorts, Vimeo videos, or any other external embeds
Want a framework for designing the perfect homepage?
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
Step 1: Upload Your Video to Squarespace
Go to Pages in your Squarespace dashboard.
Choose the page you want to add your video to, then click Edit.
Add a Video Block where you want it to appear.
In the block, click the + button to upload your video file from your computer.
Once uploaded, you’ll see it in the block, but by default, it will appear in a landscape (horizontal) frame with large empty spaces on the sides.
Step 2: Apply Custom CSS to Make the Video Fill Vertically
Since Squarespace doesn’t have a built-in setting to “fill” video blocks the way it does with images, we’ll use some CSS.
Save your page.
Go to Design > Custom CSS.
Paste in CSS that targets Squarespace’s native video player and stretches it to fit vertically.
.sqs-native-video .native-video-player {
padding-bottom: 100% !important;
}
You might need to adjust the padding value to remove all white space on the sides without cutting off the top or bottom of the video.
Step 3: Target Only the Videos You Want (Optional)
By default, the above code will apply to all native video blocks on your site. If you only want certain videos to be vertical, you can target specific block IDs or section IDs.
How to Find Your Block or Section ID:
Install the Squarespace Block Identifier Chrome extension (by Will Myers).
Click the block or section you want to target.
Copy its ID.
#block-id {
.sqs-native-video .native-video-player {
padding-bottom: 100% !important;
}
}
Why This Works
This CSS doesn’t stretch the video content itself, it changes the video player container’s dimensions so your portrait video fills the space naturally. It’s a simple trick, but one that Squarespace doesn’t offer natively.
Final Result
Once applied:
Your vertical (portrait) video will fill the block completely
No side padding will remain
You can control whether this applies globally, to specific videos, or to entire sections
Summary
You can’t currently make a Squarespace video block vertical through its built-in design tools. But with a quick CSS tweak, you can achieve a clean, full-height portrait video display, perfect for showing off mobile-shot videos or Instagram/TikTok content.
