How to Change the Aspect Ratio of Squarespace Video Players
It’s easy to add video content with Squarespace's built-in video blocks and background video features. But people searching for how to change the aspect ratio of a video player, especially on Squarespace-hosted videos, tend to run into a wall: The default video player is stuck in the 16:9 ratio format, whether or not your video fits that description.
If you're trying to display square videos, vertical (9:16) reels, or cinematic ultra-wide clips, this default behavior can break your layout and degrade your visual storytelling.
In this post, we’ll walk you through how to change the aspect ratio of Squarespace video players using CSS, so your video content looks just as you intended across all devices.
The Challenge: Squarespace Locks Aspect Ratios by Default
When you insert a video block on Squarespace 7.1, it automatically wraps your video in a container that cleverly holds a 16:9 dimension using the padding-bottom trick (usually 56.25%).
This is great for regular widescreen videos, as we’ve already seen, but not for:
Square videos (1:1)
Vertical mobile content (9:16)
Cinematic video formats (2.35:1)
Custom-branded content with unique dimensions
The Solution: Override with Custom CSS
That is, if you want to change the aspect ratio of video players on your website or on a specific block manually, you can target the video container class.
Step-by-Step: How to Change the Video Aspect Ratio
1. Go to Your CSS Panel
Navigate to Design → Custom CSS
Scroll down and paste the following code:
2. Apply a Global Aspect Ratio Change
/* Change aspect ratio for all Squarespace video blocks */
.sqs-block-video .intrinsic {
padding-bottom: 100% !important; /* 1:1 square format */
}
This changes all video blocks on your site to display as squares (1:1).
Common Aspect Ratio Values
Use the following values in padding-bottom to get your desired ratio:
| Aspect Ratio | Value to Use | Description |
|---|---|---|
| 16:9 | 56.25% | Default Squarespace layout |
| 4:3 | 75% | Classic TV and presentation format |
| 1:1 | 100% | Square, Instagram-friendly |
| 9:16 | 177.78% | Vertical (Reels, TikToks) |
| 2.35:1 | 42.55% | Cinematic widescreen |
Target One Specific Video Block Only
Don’t want to change all videos? You can target a single block:
Right-click the video on your page
Click Inspect
Find the block’s unique ID (e.g., block-yui_3_17_2_1_1682345678901_12345)
Use this CSS:
/* Adjust aspect ratio for one specific video */
#block-yui_3_17_2_1_1682345678901_12345 .intrinsic {
padding-bottom: 177.78% !important; /* Vertical video (9:16) */
}
This is ideal for featured sections or pages where only one video needs a custom layout.
Mobile Responsiveness: Fully Supported
This approach is inherently responsive; it uses a percentage value for the padding, which scales proportionately with window width.
But also remember to use the same aspect ratio for the actual video file you use on your website, otherwise the video wouldn’t align visually with the player container.
Note: This Won’t Work for Background Videos
This method is intended for Video Blocks, not the Background Video Sections. There is another separate method to background video aspect ratio control requiring object-fit, min-height, and section-specific overrides.
Let us know if you would like a follow-up tutorial on that.
Final Thoughts
By adjusting the aspect ratio of your Squarespace video players, you can design with purpose, whether you’re featuring mobile-first content, square social videos, or ultra-wide brand visuals.
With just this one line of CSS, you can bust out of Squarespace’s one-size-fits-none 16:9 layout and craft a totally custom, responsive video experience that works for your brand.
Frequently Asked Questions
-
Squarespace employs an internal padding-bottom ratio hack to force video blocks to 16:9 (56.25%). It means most videos have that format consistency, but it restricts the flexibility for square, vertical, and cinematic formats.
-
Yes, with CSS, just override the container of the video block. For instance, padding-bottom: 100% creates a square layout, and padding-bottom: 177.78% makes the player vertical (9:16).
-
No, This solution is also fully responsive as its paddings are percentage-based. The video is contained within a responsive wrapper, which means the layout changes to adapt to the screen width of any device.
-
Every Squarespace block has a distinct block ID. On your CSS, you can request that ID (e.g., #block-yui_...) and then apply a custom aspect ratio to just one video and let others be whatever was applied.
-
No, video backgrounds use a different rendering (object-fit: cover). Hence, in order to apply a background video and change its scale, you require an alternative CSS method that would include modifying the section height and the video object-fit as well.
