How to Add Vertical Videos on Squarespace
Watch the Video
Check out the YouTube video below 👇
Why Add Vertical Videos to Your Squarespace Website
In today’s world, social media plays a huge role in how businesses promote their services and products. Platforms like Instagram, TikTok, and YouTube Shorts rely heavily on vertical videos so it makes sense to bring that same style to your website.
Unfortunately, Squarespace doesn’t currently offer a native feature for displaying vertical videos properly. But with a little custom code, you can easily make vertical videos fit perfectly into your Squarespace layout. Here you’ll find how to add vertical videos onto your Squarespace website.
Step 1: Add Your Video Block
Start by going to your Squarespace website and clicking “Edit.”
Navigate to the section where you want your video to appear and click “Add Section.”
Once you’ve added your section, select the Video Block option and upload or link your vertical video. You’ll notice that by default, the frame looks more horizontal that’s what we’ll fix next.
Step 2: Access Custom CSS Settings
Click “Save” to exit editing mode, then navigate to:
Website → Pages → Custom Code → Custom CSS
This is where you’ll add the short CSS snippet that enables the proper vertical display for your video.
Step 3: Add the Custom Code
Paste the provided code snippet into the Custom CSS box. This code adjusts padding and video alignment so your vertical video displays properly.
Once added, save your changes. You’ll now see your video appear vertically and formatted to fit the section.
Add this code to the Custom CSS to get your vertical video on Squarespace:
.sqs-native-video .native-video-player {
padding-bottom: 100% !important;
}
Step 4: Target a Specific Video Block (Optional)
By default, the CSS code affects all video blocks on your site.
If you want the vertical layout to apply only to a specific video, you can target it using its block ID or section ID.
To find this:
Right-click on the video block and select “Inspect Element.”
Locate the unique block or section ID.
Add that ID to your CSS snippet to limit the effect to that one block.
OR
Search up “Squarespace ID Finder” on the Chrome Extension Store and download that. It will make it easier to get the block ID.
This method is great if you have multiple videos and only want some of them to display vertically.
Step 5: Save and Test
After applying the CSS, click “Save” and refresh your page.
Your vertical video should now appear properly aligned and responsive across devices.
Conclusion
And that’s how you can display a vertical video on Squarespace.
This simple CSS tweak lets you integrate your social video content directly into your website without needing any external plugins or complex code.
If you run into issues or need help customizing your Squarespace design, feel free to reach out. I’d be happy to help.
Your Designer
I’m Dylan, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from E-Commerce sites to Real Estate and Insurance brokers. If you’re looking for a website and want to discuss a potential project, email me at dylan@highrlabs.com. You can also schedule a free 30-minute consultation call
