How to add a vertical video in Squarespace

While working with a client recently I requested videos for the homepage banner, and they ended up sending all videos in a vertical format. It made me think about how vertical videos have become the norm today, especially with the rise of social media platforms like Instagram and TikTok. Though I will not suggest using a vertical video for a home page banner, but you can use them in innovative ways throughout your site (think video reviews, interactive about me sections, portfolios, etc).

However, if you’re using Squarespace for your website, adding vertical videos is not straightforward. Squarespace's default block editor restricts the upload to a 16:9 or horizontal format, adding space if the uploaded video is vertical, which my not always be aesthetically pleasing. But if we have a little CSS by our side, adding a vertical video can be easy.

Videos of any type can adversely effect your website speed, so before uploading your vertical video to Squarespace or any other hosting platform, ensure it’s optimized for web use. This includes appropriate resolution, format (MP4 is recommended), and a file size that balances quality and loading speed.

Now that you have your optimized vertical video ready, grab your laptop and your coffee and let’s get started!

Add a vertical video in Squarespace

Method 1: Add a vertical video by changing the aspect ratio of a video directly uploaded to Squarespace

1. Open the Squarespace Editor: Go to the page editor.

2. Add a Video Block: Click the ‘+’ icon, choose ‘Video,’ and select ‘Upload File.’

3. Upload Your Video: Select your optimized vertical video file from your computer.

4. Change the aspect ratio by adding padding: To do this you need to add some CSS. To get into the CSS editor in Squarespace go to Website Tools > Custom CSS

5. The most commonly used vertical videos are the ones we create on mobile phones for Instagram or TikTok reels. The aspect ratio for these videos is 9:16. The below codes cover a few more use cases and you can select one depending on your use case:

Code to add a vertical video with 9:16 aspect ratio:

//Add a vertical video with 9:16 aspect ratio
.sqs-native-video .native-video-player {
    padding-bottom: 100% !important;
}

Code to add a vertical video with 3:4 aspect ratio:

//Add a vertical video with 3:4 aspect ratio
.sqs-native-video .native-video-player {
    padding-bottom: 75% !important;
}

Code to add a square video:

//Add a vertical video with 1:1 aspect ratio
.sqs-native-video .native-video-player {
    padding-bottom: 25% !important;
}

What if you want to add vertical and horizontal videos on same page?

The above codes will change the aspect ratio of all the videos on your website!

If you have a page that consists of a combination of vertical and horizontal videos, you might want to target only specific videos to be shown in the vertical format.

To do this use the block id to target the video block for which you want to change the aspect ratio. Use the Squarespace Id finder extension on Chrome to find the block id of the video block you are using then apply the following code:

//Replace #block-yui_123456 with the block id of the specific video block you want to target
#block-yui_123456 .sqs-native-video .native-video-player {
    padding-bottom: 100% !important;
    }

You may also add a vertical video in Squarespace by uploading it on a separate hosting platform and embedding the code to Squarespace. For most cases the embed code generated by the platform should take care of the aspect ratio as well, however if it does not you can adjust the width and height to change the aspect ratio as per your liking.

Method 2: Add a vertical video by changing the width and height properties of an embedded video

1. Choose Your Platform: Decide whether to host your video on YouTube, Vimeo, or any other streaming platform.

2. Upload Your Video: Follow the platform-specific instructions to upload your vertical video.

3. Optimize Your Video: Add a title, description, and tags to make your video SEO-friendly.

4. Get the Embed Code: From YouTube or Vimeo, get the embed code for your video. This is generally found when you click on the ‘Share

5. Open Squarespace Editor: Navigate to the page where you want to add the video.

6. Add the video using the embed block: In the content area, click on the ‘+’ icon to add a block, and select ‘Video.’

7. Check and update the aspect ratio: Most platform generate a code as shown below. To change the aspect ratio find the width and height parameters and change them as per your liking. Some common width and height values for 9:16 ratio are 1080X1920, 640x1138 etc.

<iframe src="https://player.vimeo.com/video/123456789" 
  width="640" height="1138"  //change the width and height to change the aspect ratio
  frameborder="0" 
  allow="autoplay; 
  fullscreen; 
  picture-in-picture" 
  allowfullscreen>
  </iframe>

To make the most out of your video, don’t forget your SEO on Squarespace

• Ensure your video titles are descriptive and include relevant keywords.

• Write detailed descriptions with keywords.

• Always check how the video looks on Mobile.

Frequently Asked Questions

1. What is the best format for vertical videos on Squarespace?

   MP4 is the recommended format due to its compatibility and quality.

2. Can I embed Instagram Reels on my Squarespace site?

   Yes, by using the embed code provided by Instagram. To do this go to post settings and click on “Embed”. Copy and paste the generated code.

3. Is it possible to autoplay vertical videos on Squarespace?

   For embedded videos Autoplay settings depend on the hosting platform and browser policies. For videos uploaded to Squarespace you can set autoplay by using the autoplay toggle.

4. How can I improve the loading speed of my vertical video?

   Optimize your video’s file size, and choose the appropriate size for your use case. If hosting outside Squarespace use a reliable hosting platform like Vimeo or Youtube.

About me:

Hi I’m Aneet. I’m a website designer based in Seattle, WA. My love for design & code is only matched by my appreciation of classic novels, history, and music from eras before I was born (maybe I’m an old soul). I love solving problems through strategy, design or code and love 1:1 conversations that make you lose track of time. If you want to connect feel free to reach out on Instagram @brandunpuzzled (Instagram is where I hang out, at least on DMs!). Thank You for stopping by :)