How to Disable Banner Video on Mobile in Squarespace
Banner video: A bold new way to introduce yourself, whether you are on desktop, cinematic, eye-catching, and immersive. But on mobile, they are often a burden. And the slow load times, inconsistent autoplay, and data consumption that’s a heavy load to the user, leave mobile visitors a little more frustrated than flattered.
It’s for this reason that many Squarespace users opt to turn off banner videos for smaller viewports, in favor of a crisp, lightweight fallback image. The result? Faster load times, more usability, a more refined mobile experience – all without sacrificing the impact of video on desktop.
In this tutorial, we’ll teach you how to disable banner videos on mobile in Squarespace with CSS, plus we’ll also share some hints on how you can make a fallback design look better!
Why You Should Disable Banner Videos on Mobile?
Better Performance: Video files are large and may reduce your page speed.
Improved UX: Autoplaying or slow-loading videos can distract or frustrate users.
Data Friendly: Mobile users expect content to be light, particularly when they have data restrictions.
Control visuals: You have a choice of showing an image or agreeing to use video fallback.
Step-by-Step: Disable Banner Video on Mobile
Step 1: Identify Your Section ID
Each section in Squarespace has a unique data-section-id. To find it:
Open your page in Squarespace Editor.
Right-click your banner area and click Inspect.
Look for a tag like:
<section data-section-id="685125d6308cee23f8c841d6">
Step 2: Add Custom CSS
Go to: Pages → Custom code → Custom CSS Paste this code, replacing the section ID with yours:
@media screen and (max-width: 768px) {
section[data-section-id="68b6ae92f71fb454d6ff82f2"] {
.sqs-video-background-native video, .sqs-video-background video, .sqs-video-background iframe{
display: none !important;
}
}
section[data-section-id="68b67e88c24f1822304aaea9"] .section-background {
background-image: url('https://yourdomain.com/path-to-image.jpg');
background-size: cover;
background-position: center;
}
}
Replace 'https://yourdomain.com/path-to-image.jpg' with your own fallback image URL (uploaded in Site Files or elsewhere).
Bonus Tips
Fallback Images: Ensure the fallback image aligns with your branding and is optimized for mobile devices.
Breakpoint Control: Adjust max-width: 768px to control where the video gets hidden (e.g., tablets too).
Test Your Page: Check your page across multiple devices to ensure a consistent appearance.
Final Thoughts
It’s not about letting go of style, but about putting performance and the user first, and focusing on what really matters on mobile. With a fallback image installed, it will remain impressively professional and visually appealing, loading faster and functioning more consistently for mobile visitors.
With a bit of custom CSS, you can have your cake (in the form of an impressive video banner for desktop visitors) and eat it (a responsive fallback for those on smaller screens), too. Test on other devices, perfect your fallback visuals, and you’ll have a site that feels considered and refined no matter how you’re viewing it.
Frequently Asked Questions
-
Banner videos can also make a page load slowly, drain a battery, or not autoplay on smaller devices. Substitute them with a lightweight fallback, including an “unveil” effect, and activate the images as they’re scrolled through.
-
Yes. You are controlling this with the screen-size breakpoint. For instance, at 768px and above, this would typically target tablets, but at 480px+ it's phones only.
-
In case the switch is off and this section will display the fallback background image. It does make everything neat on the layout, more so than any video file could do that!
-
Squarespace can automatically create a still image from your video, but for the best results, upload and specify an appropriate, e-branded, optimized fallback image.
-
No. The change should appear on smaller screens only (according to the breakpoint you used). Desktop users will still have full banner video treatment.
