How to use vertical video in Squarespace 7.1

Sep 10

Vertical video has taken the social media world by storm, and so many of us Squarespacers want to share this format on our websites! Squarespace video blocks aren’t designed to handle this (yet) but with a little clever CSS, you can change your video block to support a 9:16 vertical video format.

I’ve got the step by step instructions and code below, and created a tutorial video so you can see these codes in action! 🙌

Important info: this tutorial is for a video content block. If you want to have a vertical video collection, check out this tutorial to learn how: https://youtu.be/zYC3n6GSktQ

Step 1: Add This Code To Your Custom CSS

The first thing you’ll need to do is access your site’s custom CSS. To do this, go to Website → Pages → Website Tools → Custom CSS and paste the following code:

.video-block .video-player{
  padding-bottom:120%
}

Step 2: Adjust the code to fit your video ratio

This code will resize all video blocks on your site to be a 9:16 ratio instead of 16:9. You can change this too!
Adjust the 120% in the code above to fit your specific video.

Step 3: (Optional) Add the block ID to change one video at a time

If you want to change the size of only one block at a time, you can start your code with the block ID for that specific video, like this:

#block-123456.video-block .video-player{
  padding-bottom:120%
}

Record scratch 💥 what’s a block id?!

Everything in Squarespace gets a unique ID number, including video content blocks. You can use this in your code to tell a computer browser to only use the code on that specific thing. I use a free Chrome extension to quickly grab that info (not affiliated - just a fan) Here is an article with more info on how to find the Squarsapce block ID for your own content.