How to Make Videos Vertical on Your Squarespace Website

In this blog tutorial, i will guide you through the steps to add vertical videos to your Squarespace website

Let’s dive in..

Watch the video

Check out the YouTube video below 👇

Filming vertical videos is very popular these days, and they are widely used on websites. Unfortunately, Squarespace does not natively support vertical videos. When uploaded, they often have excessive spacing around them and appear small—this is not ideal for a website.

Luckily, we have a friend called CSS that can help us achieve a properly displayed vertical video on Squarespace.

What we need to do is go into Custom CSS and add the following code:

.sqs-native-video .native-video-player { padding-bottom: 100% !important; }

Once this code is added, the video will instantly become vertical. However, keep in mind that this will apply to all videos on the site, making them vertical as well.

From there, you can go into the editor and adjust the size of the image to your desired dimensions. You can also modify the padding percentage to best fit your video. I recommend setting it between 100% and 120%.

Your designer

I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.