How to Add Vertical Video on Squarespace
Learn how to get that fresh vertical lookin’ video on your beautiful site.
How to add a site title next to your logo on Squarespace header with white arrow pointing to Venture Homes & logo
Vertical video is everywhere—and for good reason. With over 60% of web traffic coming from mobile devices, content that’s optimized for tall, narrow screens is no longer optional. Platforms like Instagram, TikTok, and YouTube Shorts have trained users to expect vertical video. So if you’re creating content for mobile users, showcasing it vertically on your website just makes sense.
While Squarespace natively doesn’t support vertical video, it can be an easy fix to get your videos showing how you want. The built-in video block forces your videos into a widescreen (16:9) format, which can make vertical clips look small, stretched, or surrounded by unwanted padding.
The good news? There are simple ways to work around this limitation. In this post, you’ll learn:
How to use custom CSS to display vertical videos correctly
How to apply the styling site-wide or just to one block
How to use embed codes if you prefer external hosting (like YouTube or Vimeo)
Before we get into it, if you’d prefer to watch instead of read, I’ve also included a video tutorial to walk you through each step.
Learn how to add vertical video on your Squarespace website
-
[00:00:00.00]
How to Add Vertical Video on Squarespace. Let's do it. I am on a demo website. I am on the About page. As you can see, there's a nice video here at the top. Then if you scroll down, I have a vertical video, but the sizing is a bit weird. It doesn't show the full length video. It's obviously small. If I wanted to, I could adjust it here and make it bigger, but we don't like this weird white space here that we have within the frame, and we can't get rid of that no matter how you scale it. What we're going to do is use Custom CSS to make this look better. If we click on Save, click Exit, scroll down, go to Custom Code, Custom CSS, This is some past code that allows you to add the site title next to the site logo. That's another video. You can find that on the channel as well. But what we're going to do is we're just going to move down to line 14. And then I have the code on my other monitor, so I'm just going to get it real quick. And you can find this in the description.
[00:01:23.14]
So I'm going to paste this in here. And as you can see, it has now adjusted all videos on the site to be formatted vertically. Now, this one obviously doesn't look super good because it is not meant to be formatted this way. But if you scroll down, this one is now formatted correctly. What do we do to make sure that this is not affected by the code and that this one is the only one that is? Now, obviously, if you have a website in which all of the videos or most of the videos are going to be vertically positioned, vertically oriented, then using this code that we pasted in here is good because it affects all native, as you can see, native video player on the site. You can even adjust it even further, even, even, even, right here with the the padding bottom. If you were to take this and do 80%, then you can see it obviously scaled it back to where we now have that white space again, but we don't want that because it looks weird. So we're going to do, I think it was 130, right? Yeah. So 130, and that looks good.
[00:02:56.07]
But what we need to do is make sure that this is not affected. So what I'm going to do first is get the block ID for the vertical video that we have that we want to solo out, right? So I have this extension. You can find it in the Chrome store. When you click it, it shows you all of the IDs and stuff, section ID, block ID, et cetera. We're going to grab this ID for this specific video element. We're going to come over here and and paste it before the code and then click Space. Then, as you can see, this one is still affected, but this one is no longer affected. That's because it is solo-like solo-soloing? Solo-ly affecting this video. What we can do is now click Save, and then when we click Edit, I'm going to turn off the extension. As you can see, this one is normal. Let me go to the preview mode. Now, as you can see, this one's good. It looks nice. Then if you scroll down, you have this video here. Now, obviously, it's a little bit big, so you can always come in here and scale that down a bit.
[00:04:24.23]
Then obviously, everything else got moved around, so you can come in here and adjust this, move this up, make it look pretty. And so, yeah, that's looking better already. So that is how you add vertical video to Squarespace. Now, if you are someone who is looking to get a website built and you just don't want to do it yourself, that's fine. You can go to designwithabby. Com. You can inquire with me today, and we can talk about how to bring your website vision to life.
Why Use Vertical Video on Your Website
Still wondering if vertical video is worth the extra effort? Here’s why it matters:
Mobile-first experience: Most of your visitors are browsing from phones. Vertical video takes up more screen space, making it instantly more engaging and easier to watch—no tilting required.
Social media ready: If you’re already creating content for platforms like Instagram Reels, TikTok, or YouTube Shorts, why not repurpose it? Showcasing these videos on your website keeps your branding consistent and strengthens your visual identity.
Great for specific content types:
Behind-the-scenes clips
Personal introductions or service walk-throughs
Client testimonials
Product or space demos (especially for local or service-based businesses)
Modern UX and design trends: Vertical video reflects a modern, scroll-friendly aesthetic that today’s users are used to seeing. It signals that your brand is current, creative, and mobile-aware.
Method 1 – Add a Vertical Video Using a Video Block and Custom CSS
If you want to display vertical videos using Squarespace’s built-in video block, you’ll need to override the default 16:9 aspect ratio with a bit of custom CSS. Here’s how to do it:
Step 1: Add Your Video
In your Squarespace editor, navigate to the page and section where you want to add your video.
Click the + button to add a block and select the Video block.
Upload your vertical video file or paste a link from YouTube, Vimeo, or another supported platform.
Step 2: Apply CSS Site-Wide
From your main dashboard, go to Website > Website Tools > Custom CSS.
Paste the following code into the CSS editor:
.sqs-native-video .native-video-player {
padding-bottom: 120% !important;
}
What this does:
The padding-bottom value controls the aspect ratio of the video container. A value of 120% simulates a 9:16 (vertical) format. Squarespace uses this padding trick to maintain aspect ratios responsively across devices.
Step 3: Adjust for Best Fit
Preview your video on both desktop and mobile to make sure it looks right.
If the video is too tall or short, tweak the percentage. Try values between 100% and 130% until it looks just right for your layout.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Method 2 – Target a Single Vertical Video Using Block ID
If you only want one specific video to display vertically—without affecting others—this method is for you.
Why Use Block-Specific Styling
Great when you’re mixing both vertical and horizontal videos on the same site.
Gives you full control without changing the style of every video block globally.
Steps to Apply CSS to One Block
1. Find the Video Block’s Unique ID
Right-click on your video block in the live preview and select Inspect (in Chrome or Firefox).
Look for a block ID that looks something like: block-yui_3_17_2_1_1234567890123_4567
Copy this entire ID.
2. Add Custom CSS for That Block Only
In Website > Website Tools > Custom CSS, paste the following code, replacing yourblockID with the ID you copied:
#yourblockID .sqs-native-video .native-video-player {
padding-bottom: 120% !important;
}
This targets only that specific block, leaving all other video styles untouched.
Alternative Method – Embed Vertical Videos from External Platforms
If you're already hosting your vertical videos on platforms like YouTube, Vimeo, or a custom player, you can skip the Video Block entirely and use an Embed Block instead.
How to Use the Embed Block:
In the Squarespace editor, add a new Embed Block in the section where you want your vertical video.
Paste the full embed code (iframe) from your platform. Most video platforms offer an "Embed" option under the Share menu.
To ensure a vertical display, manually adjust the height and width attributes in the code. Example:
HTML:
<iframe width="360" height="640" src="https://www.youtube.com/embed/yourvideo" frameborder="0" allowfullscreen></iframe>
Optional – Add Inline CSS for Better Control:
You can also wrap the iframe in a <div> with inline styles or use a class for targeted CSS. This helps center the video or manage extra space if it looks off.
Important Notes:
Some embed containers in Squarespace may add padding or max-width restrictions.
You may still need to use custom CSS to eliminate black bars or spacing issues, especially on mobile.
Not all themes treat embeds the same way, so always preview across devices!
Styling & Mobile Tips
No matter which method you choose, here are a few important style and responsiveness tips to ensure your video looks great on all screen sizes:
Always Preview Across Devices
Use the Squarespace device preview toggles to check mobile view.
Vertical videos that look fine on desktop might appear awkward on mobile (and vice versa).
Adjust Margins and Spacing
Use Section > Format settings to reduce or add space above and below your video.
For centered layout, make sure padding and alignment are consistent.
Customize with Responsive CSS (Optional)
Want precise control over how your video behaves on smaller screens? Add media queries in your Custom CSS to tweak layout based on screen size. Example:
@media screen and (max-width: 640px) {
.sqs-native-video .native-video-player {
padding-bottom: 140% !important;
}
}
This ensures a better fit for portrait-mode mobile screens.
Resources & Tutorials
If you prefer a video walkthrough or want to dive deeper into vertical video in Squarespace, check out these trusted resources:
Trusted Tutorials
Inside the Square – Step-by-step CSS tricks and styling tutorials for Squarespace.
The Square Genius – Custom code tips for modern layouts, including vertical video support.
Rolf Made – Practical blog on vertical video fixes and spacing issues.
Community Tips
SquarespaceForum discussions about embed styling and block ID targeting.
Conclusion
While Squarespace doesn’t support vertical video natively, you’re not stuck with awkward widescreen layouts. With a little CSS or a smart embed workaround, you can display your 9:16 videos beautifully—and in a way that complements your branding and keeps mobile users engaged.
If you’re comfortable with code, the custom CSS methods give you the most flexibility. Prefer a no-code option? The Embed Block + YouTube/Vimeo method works great too.
Either way, remember to:
Preview across all devices
Use vertical video where it counts—for testimonials, mobile-first content, or short-form clips
Keep your design mobile-friendly and on-brand
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
Yes, you can display vertical videos on your Squarespace site even though the platform natively uses a 16:9 (widescreen) format. With custom CSS or an embed workaround, you can easily adjust your video block to show a 9:16 vertical aspect ratio.
-
To modify a video block for vertical content, add custom CSS that changes the padding property to create a 9:16 ratio. For example, applying padding-bottom: 120% !important; forces the video container to accommodate vertical formatting.
-
Site-wide CSS will affect every video block on your website, while block-specific CSS allows you to target a single video by its unique block ID. Use site-wide CSS if all videos are vertical, or block-specific CSS if you have a mix of vertical and horizontal videos.
-
Absolutely. If you prefer not to use the video block, you can embed vertical videos using an Embed Block. Just paste the iframe code from YouTube or Vimeo, and adjust the width, height, or inline CSS as needed for a proper 9:16 display.
-
Always preview your site on various devices. If your vertical video appears too tall or has unwanted spacing on mobile, tweak your CSS settings (using media queries if necessary) or adjust the embed parameters to ensure a seamless mobile viewing experience.
