How to add a vertical video on Squarespace
In the world of TikTok, Instagram and Facebook, videos are going portrait.
As more users than ever before consume online content on a mobile device, most video content that’s created for the web is shot vertically. Even on YouTube you can now upload Shorts that are portrait videos instead of landscape.
What this means is that there’s now a strong demand for adding portrait or vertical videos into Squarespace websites, especially for content targeted at mobile users.
The problem, however, is that Squarespace doesn’t offer this as a native feature and instead you have to upload your vertical video content and display it horizontally, with black borders on either side.
Luckily however with a bit of simple code, you can add and display vertical videos to your Squarespace website.
Watch the video
Check out the YouTube video below 👇
How to add a vertical video on Squarespace
Once you’ve added in your video head to your Custom CSS panel and first start by targeting your video with the target:
.sqs-native-video .native-video-player
Next you need to add in the code, so it’ll look something like this:
.sqs-native-video .native-video-player {
padding-bottom: 100% !important;
}
What this code does is add padding to the bottom of your video which will stretch it out vertically, making the video switch from a landscape to a portrait display.
You can play around with the padding amount if you want to, reducing it will make the videos shorter in display length, but I tend to find that 100% gives the perfect portrait ratio without stretching the videos too long.
📩 Join the inner circle to get exclusive code updates
And as always, don’t forget to hit save once you’ve added in your code.
With so much focus on video content online at the moment, this code is a really useful snippet to have up your sleeve when adding videos to your Squarespace website.
If you found this article useful why not check out my guide to the new Squarespace video blocks update next?
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.