Display a Fallback Image on Mobile Instead of Video in Squarespace 7.1
Background and video blocks can be very successful on a desktop, but struggle to load quickly without awkward cropping or degrading poorly into a mobile experience. It’s why many designers also decide to hide video for mobile display and show a fallback image instead.
Squarespace 7.1 doesn't have a native option to trigger this—but you can safely and cleanly accomplish it with just CSS only.
Why Use a Fallback Image on Mobile?
Replacing video with an image on mobile helps:
Improve page load speed
Reduce data usage
Prevent awkward video cropping
Avoid autoplay issues
Create a cleaner mobile layout
This is especially useful for hero sections, banners, and background videos.
How the Solution Works
On mobile devices:
The video is hidden
A background or image block is shown instead
On desktop:
The video remains visible
No layout changes are affected
Step 1: Set a Fallback Image
Before adding CSS, make sure you have:
A background image on the section
orAn image block placed behind / near the video
This image will act as the fallback on mobile.
Step 2: Hide the Video on Mobile (Core Solution)
Go to Website → Pages → Custom Code → Custom CSS and add:
@media only screen and (max-width: 767px) {
.sqs-video-wrapper,
.section-background video {
display: none !important;
}
}
What this does
Hides all video blocks on mobile
Disables background videos
Allows fallback images to show naturally
For most sites, this alone is enough.
Step 3: Ensure the Fallback Image Displays Correctly
If you’re using a background image, add:
@media only screen and (max-width: 767px) {
.section-background {
background-size: cover;
background-position: center;
}
}
This ensures the image fills the section cleanly on mobile.
Target a Specific Section Only (Recommended)
If you want this behavior on one section only:
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"] video {
display: none !important;
}
}
This avoids hiding videos site-wide.
Common Mistakes to Avoid
Hiding videos without a fallback image
Using fixed heights that collapse sections
Applying global rules when only one section needs it
Forgetting to test on real mobile devices
Best Practices for Mobile Video Fallbacks
Always provide a high-quality fallback image
Match image framing to the video
Keep section height flexible (Auto)
Optimize images for mobile size
Test on both iOS and Android
Final Thoughts
Showing Placeholders for Video even on mobile, rather than Videos is a slick, performance-oriented decision. Although Squarespace 7.1 does not have a built-in option, some well-crafted CSS provides all the control you need—and no JavaScript or plugins required.
The payoff: quicker load times, cleaner designs and an improved mobile user experience.
FAQ: Fallback Images for Videos on Mobile in Squarespace 7.1
-
Yes. This solution hides videos on mobile only.
-
No. CSS is sufficient.
-
No. It only changes visual rendering on mobile.
-
Yes, by targeting the section ID.
-
Yes. It works for both video blocks and background videos.
