How to Fix Background Video Scaling Issues on Mobile in Squarespace 7.1
Adding Background videos is a great way to create visual impact in your Squarespace 7.1 website, but what happens if that video just doesn't look right on mobile? If your video is being cropped, zoomed in entirely too much, or is missing important content from the frame on phones, this post is for you.
In this article, we are going to discuss how to resize and stretch a background video on mobile in a certain section with a simple CSS snippet.
The Issue: Background Videos Don’t Resize Well for Mobile
Squarespace applies object-fit: cover as the default action to make sure that any background video fills its container. This may look good on a desktop, but it leads to some problems when a site is viewed on a small screen:
Important parts of the video are cropped out
The video appears zoomed in or off-center
There's no control over how much of the video is shown
This can result in a mobile experience that feels disconnected, particularly when you lose out on the most important images.
The Solution: Resize the Section and Force Full Video Stretching
Using a targeted media query and section ID, you can manually adjust the video’s container height and force the video to stretch and fill the space on mobile.
The Code (Explained):
@media screen and (max-width: 767px) {
section[data-section-id="685125d6308cee23f8c841d6"] {
min-height: 50vh !important;
}
section[data-section-id="685125d6308cee23f8c841d6"] .section-background video {
object-fit: fill !important;
}
}
What This Code Does:
| CSS Rule | Purpose |
|---|---|
@media screen and (max-width: 767px) |
Targets only mobile screen widths |
min-height: 50vh |
Forces the section to maintain at least half the screen height |
object-fit: fill |
Stretches the video to completely fill its container — even if distorted |
Important Notes About object-fit: fill
Using object-fit: fill ensures the video fills the area, both horizontally and vertically. However, it disregards the video’s aspect ratio, which may lead to:
Vertical or horizontal distortion
Slight image warping (especially on very narrow screens)
Use this only when you want maximum video coverage and you’re okay with some distortion for better visual balance.
When to Use This Code
You have a specific section ID where the video needs to be adjusted
You want the video to always stretch to fill the mobile screen, no matter what
You're prioritizing layout consistency over perfect visual fidelity
Optional Enhancements
If you want the video centered or contained instead of stretched, try object-fit: contain or cover:
object-fit: contain; /* Maintains aspect ratio, may leave gaps */
object-fit: cover; /* Default, may crop edges */
You can also experiment with:
max-height: 100vh;
width: 100vw;
To fine-tune your mobile layout.
Final Thoughts
Background videos can set the tone for your entire homepage or section, but they have to be mobile-friendly. By adding some targeted CSS to resize your video section and stretch the video to fill the screen, you ensure that your design looks intentional and professional on every device.
Be it for demonstrating a product, narrating a brand story, or setting the mood, this mobile tweak lets you step up your impact without compromising on performance on mobile.
Frequently Asked Questions
-
Squarespace Feature Background videos are set to object-fit: cover by default. This makes sure that the video fills the container from corner to corner, but for many smaller mobile screens, it means that it’s going to cut off or blow up part of the video.
-
You could add a CSS rule specific to this section ID. You could adjust object-fit: cover, fill, or contain to control video scaling. This allows you to move more and crop if needed, but there’s a trade-off with each (stretching vs. cropping fudge vs. space).
-
Cover → Fills the container but crops edges (default in Squarespace).
Contain → Maintains the aspect ratio but may leave black/white space.
Fill → Stretches video to fit the container, but can distort the aspect ratio.
-
Nope, the CSS tweak doesn’t make the file any bigger. But video backgrounds are already data-heavy. For optimal video performance, keep your MP4 files short (around 5-10MB), and include a fallback image.
-
Yes, and doing so is useful if you want your videos to resize, but you’re better off targeting specific section IDs, anyway — you wouldn’t want to skew all videos on your website. Each background-section has some data-section-id you can copy from Inspect→HTML.
