Resize Video Block Ratio for Mobile View in Squarespace 7.1
In Squarespace 7.1, video blocks will often look fantastic on desktop and then display cropped or zoomed in or just inexplicably tall when viewed on mobile. This problem is often due to how Squarespace handles sizes, and that it has a fixed aspect ratio that doesn’t work well in smaller screens.
In this guide, we’ll cover why video aspect ratio issues occur, what you can control natively and how to manage your video block aspect rations for mobile with clean CSS.
What Does the Video Ratio Problem Look Like?
On mobile devices, you may notice:
Video looks too tall or too zoomed in
Important parts of the video are cropped
Excessive vertical scrolling
Video dominates the screen
Inconsistent spacing around the video
These issues are especially common with 16:9 videos used inside narrow mobile layouts.
Why This Happens in Squarespace 7.1
In Squarespace 7.1:
Video blocks maintain a fixed aspect ratio
Ratio is optimized for desktop first
Mobile screens are narrower and taller
Background and embedded videos behave differently
Section height and layout affect scaling
As a result, videos don’t always adapt cleanly on mobile.
Native Options to Check First
Before using CSS, try this:
Edit the page
Click the Video Block
Open Design
Adjust:
Block width
Section height (Auto is best)
Avoid overly tall sections
Test mobile preview
If the ratio is still off, use CSS.
Solution 1: Control Video Height on Mobile (Recommended)
Step 1: Open Custom CSS
Go to: Website → Pages → Custom Code → Custom CSS :
Step 2: Add Mobile-Specific CSS
@media only screen and (max-width: 767px) {
.sqs-video-wrapper {
max-height: 60vh;
}
}
This:
Limits video height on mobile
Prevents overly tall videos
Improves scroll flow
Solution 2: Force a Clean 16:9 Ratio on Mobile
If the video is being cropped incorrectly, you can force a consistent ratio:
@media only screen and (max-width: 767px) {
.sqs-video-wrapper {
aspect-ratio: 16 / 9;
height: auto;
}
}
This ensures the video keeps its proportions.
Solution 3: Fix Background Video Cropping
For background videos, use:
@media only screen and (max-width: 767px) {
.section-background video {
object-fit: contain;
}
}
This prevents important content from being cut off.
Target a Specific Video Only (Best Practice)
If you want to resize only one video:
Right-click the section → Inspect
Copy the data-section-id
Use it in your CSS
@media only screen and (max-width: 767px) {
section[data-section-id="YOUR-SECTION-ID"] .sqs-video-wrapper {
max-height: 50vh;
}
}
This avoids global side effects.
Common Mistakes to Avoid
Forcing fixed pixel heights
Ignoring mobile previews
Using vw units for video height
Applying global rules without scoping
Over-stretching background videos
Best Practices for Mobile Video Blocks
Use 16:9 or 4:5 videos
Keep mobile video height under 60vh
Avoid autoplay with sound
Test on real devices
Let content flow naturally below the video
Final Thoughts
Video blocks in Squarespace 7.1 are naturally responsive, but mobile screens may still need some taming. A few carefully crafted CSS rules can help you avoid (or mitigate) ratio breaks, shrink the amount of cropping on your image, and give users a better mobile experience—without harming performance or responsiveness.
It's all about controlling height and aspect ratio, NOT forcing the video to stretch.
FAQ: Video Block Ratio on Mobile in Squarespace 7.1
-
Because Squarespace maintains a fixed ratio optimized for desktop.
-
Not always, but CSS gives precise mobile control.
-
Yes. These are lightweight CSS rules.
-
Yes, by targeting the section ID.
-
Yes, with object-fit adjustments.
