How to Add Portrait Videos in Squarespace
In the modern era of TikTok, Instagram Reels, and YouTube Shorts - portrait videos are the new norm.
With the rise of mobile content consumption, online platforms are going portrait for video. As a result, there’s a growing need for integrating vertical videos into Squarespace websites, especially for mobile-friendly content.
One small problem. Squarespace doesn’t natively support vertical video. When you upload a portrait video, it’s typically displayed horizontally, with black bars on the sides, which doesn’t look great…
Luckily for you, as always, i’ve got the simple CSS code to fix it! Let’s do this.
Step 1: Add your video clip.
To get started, log in to your Squarespace account and open your site. Add your video block to your site and upload your video file.
Step 2: Opening the Squarespace settings menu.
Next, on the side menu, click “Pages”.
Next, in the “Pages” tab, locate and click on the “Website Tools” option.
Step 3: Open the Custom CSS panel.
Inside of the “Website Tools” section, click on the top “Custom CSS” option to open the CSS editor in your Squarespace website.
Step 4: Upload the custom code.
You should now see the Squarespace Custom CSS editor. All we need to do now is enter a couple of lines of code. Find the code below!
Now all you need to do is copy and paste the following code into the CSS editor:
.sqs-native-video .native-video-player {
padding-bottom: 120% !important;
}
The above code will target all of your video blocks on your website, by adding padding to the bottom of them. This will make all of your videos format correctly for portrait content.
To target specific videos only, make sure to wrap those lines of codes inside of your block or section ID.
STEP 5: SAVE AND PREVIEW YOUR CHANGES!
That’s it! Your portrait videos are now, portrait! Remember to save your changes by clicking “Save” in the top right of the menu.
If you now see a vertical video on your site, congratulations! You have successfully uploaded a portrait video on Squarespace 7.1.
5 benefits of using Portrait Videos on your Squarespace site:
Here are five benefits of using portrait videos on a Squarespace website:
1. Mobile-Optimized Viewing
Portrait videos are naturally suited for mobile devices, where most users hold their phones vertically. This format ensures a seamless viewing experience on smartphones, which is crucial given the increasing mobile traffic.
2. Enhanced Engagement
Portrait videos capture attention by filling the screen on mobile, creating a more immersive experience. This can lead to higher engagement rates compared to landscape videos, which may appear smaller and less captivating on mobile devices.
3. Modern Aesthetic
Portrait videos provide a sleek and modern look that aligns with current social media trends, making your website feel up-to-date and visually appealing. This can help attract and retain visitors who are accustomed to vertical content on platforms like Instagram and TikTok.
4. Improved Storytelling
The vertical format encourages more direct, personal storytelling, which can resonate with viewers. It allows for a closer focus on individuals, products, or details, making your content feel more intimate and relatable.
5. Seamless Social Media Integration
Portrait videos can easily be repurposed for social media platforms, allowing for consistent branding and messaging across your website and social channels. This saves time and effort while maintaining a cohesive online presence.
Your users will thank you for adding this.
Congrats! You’ve officially reached the bottom of the article.
Want more tips like this? Join my newsletter below! It’s free, and I won’t spam you.
Your Squarespace Designer
Hi, I’m Nick. I've been designing killer brands and stunning websites for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.
Ready to discuss your project? Book a free 15 min consultation call!
