How to Add Vertical Videos to Your Squarespace Website Without Padding

Hi everyone! Struggling to embed vertical videos on your Squarespace website without that awkward padding on the sides? I’ve got you covered. In this guide, I’ll show you exactly how to fix it using some custom CSS. Let’s jump in!

Why Vertical Videos Matter

Vertical videos are increasingly popular, especially with the rise of mobile-first content. However, Squarespace’s default settings often add unnecessary padding, making the video layout look off. Fixing this is quick and easy, and the results will make your website more polished and professional.

Step 1: Finding Your Video IDs

To apply changes to specific videos, you’ll need their unique IDs. Here’s the easiest way to find them:

Using the Squarespace ID Finder Extension

1. Install the Extension
   Download the “Squarespace ID Finder” extension for Chrome (or your preferred browser).

2. Activate It
   Click the puzzle icon in the top-right corner of your browser and enable the extension.

3. Locate Your IDs
   Navigate to your Squarespace editor, and the extension will highlight all element IDs. Copy the IDs for the videos you want to adjust.

Step 2: Adding the Custom CSS

Here’s the exact CSS code you’ll use to remove the padding:

Copy code:

#SQUARESPACEID1,
#SQUARESPACEID2,
#SQUARESPACEID3
{ padding-bottom: 120% !important; /* Ensures vertical video aspect ratio */ }

How to Apply the Code

1. Go to Design > Custom CSS in your Squarespace editor.

2. Paste the code into the CSS editor.

3. Save your changes.

This code specifically targets the three video blocks by their unique IDs, ensuring they maintain a perfect vertical aspect ratio without side padding.

Step 3: Fine-Tuning (Optional)

The padding-bottom: 120% line ensures a proper vertical aspect ratio. If you want to experiment with the spacing, you can adjust this percentage slightly to fit your needs.

Why This Method Works

By targeting specific video blocks using their unique IDs, this CSS overrides Squarespace’s default styling, letting you fully control the appearance of your vertical videos.

Need Help?

Still having trouble? Feel free to reach out to me via WhatsApp or LinkedIn (links are in the description). I’m always happy to assist!

Let’s Work Together

If you’d rather have a professional handle this for you, I’m here to help. Book a consultation using the Calendly link in the description, and let’s create something amazing for your business.

Thanks for reading, and happy designing! 🎥💻