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 👇
Want a framework for designing the perfect homepage?
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.
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?
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
