How to play different Background Video Desktop and Mobile in Squarespace 7.1
Easily add a background video to your Squarespace website, but what if you only want the background video to display on mobile? When it comes to Squarespace, the platform doesn’t support this feature directly, but you can use a small piece of custom code for this.
We’ll take you through uploading a video file, finding the section ID , and adding our mobile-targeted video logic using JavaScript and CSS, so your desktop experience remains undisturbed.
What You’ll Achieve
Display a custom video background only on mobile devices
Target a specific section using its ID.
Keep stuff up and useable at the top of your video
Maintain the integrity of your desktop layout
Step 1: Upload Your .MP4 Video to Squarespace
To play a background video, you must have a publicly accessible URL of the video file. Squarespace doesn’t support direct video hosting, but you can certainly work around it through their CSS panel.
How to Upload Your Video:
Go to Pages → Custom Code → Custom CSS
Enter the following temporary CSS:
background: url();
Place your cursor inside the URL()
Click “Add File” or “Manage Custom Files.”
Upload your .mp4 video file
Once uploaded, Squarespace will insert a public video URL, such as:
https://static1.squarespace.com/static/PROJECT-ID/t/FILE-ID/your-video.mp4
Copy this full URL — you’ll need it shortly.
Step 2: Locate Your Section’s ID
To apply the video to a specific section, you need the data-section-id attribute.
How to Find It:
Visit your site and go to the target page.
Right-click on the section where you want to add the background video.
Select Inspect (or “Inspect Element”).
Look for a tag that looks like this:
<section data-section-id="68319fc8b979f8319ecbdb08">
Copy the data-section-id value (in this case: 68319fc8b979f8319ecbdb08).
Step 3: Inject the Mobile-Only Background Video with JavaScript
We’ll now write a custom script that checks the screen width and adds a background video only if the user is on a mobile device (screen width ≤ 767px).
Where to Add This Script:
Option 1: Page Settings → Advanced → Header Code Injection
Option 2: Paste into a Code Block at the bottom of the section (inside the page editor)
JavaScript Code:
<script>
window.addEventListener("load", function () {
const section = document.querySelector('section[data-section-id="68319fc8b979f8319ecbdb08"]');
if (!section) return;
const isMobile = window.matchMedia("(max-width: 767px)").matches;
if (!isMobile) return;
section.style.position = "relative";
section.style.zIndex = "0";
section.style.minHeight = "100vh";
section.style.overflow = "hidden";
const video = document.createElement("video");
video.setAttribute("autoplay", "");
video.setAttribute("muted", "");
video.setAttribute("loop", "");
video.setAttribute("playsinline", "");
Object.assign(video.style, {
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
objectFit: "cover",
zIndex: "-1",
pointerEvents: "none",
backgroundColor: "#000"
});
const source = document.createElement("source");
source.src = "https://static1.squarespace.com/static/PROJECT-ID/t/FILE-ID/your-video.mp4"; // Replace with your uploaded video URL
source.type = "video/mp4";
video.appendChild(source);
section.insertBefore(video, section.firstChild);
});
</script>
Be sure to:
Replace the data-section-id with your own
Replace the source.src with your uploaded video URL
Step 4: Apply CSS to Ensure Content Visibility
To make sure your section content displays above the video on mobile, apply the following CSS:
Where to Add:
Go to Pages → Custom Code → Custom CSS and paste:
@media only screen and (max-width: 767px) {
section[data-section-id="YOUR SECTION-ID"] .sqs-block-content {
position: relative;
z-index: 1;
}
}
You can substitute .sqs-block-content with .section-border or another wrapper, depending on your theme structure.
Final Results
| Feature | Result |
|---|---|
| Mobile-specific video | Displayed only on mobile |
| Desktop untouched | No change |
| Full-width responsive layout | Yes |
| Content overlays video cleanly | Yes |
| No plugins or third-party tools | 100% native |
Expert Tips
Use compressed .mp4 files to reduce load time on mobile
Add a fallback background color or image if the video fails to load
You can expand this approach to support desktop/mobile switching, video overlays, or custom triggers
Frequently Asked Questions (FAQ)
1. Can I use different background videos for desktop and mobile in Squarespace?
Yes! While Squarespace doesn't offer this feature by default, you can use custom JavaScript and CSS (as shown in this guide) to load a mobile-specific video without affecting the desktop version.
2. Will the desktop video still play normally after I add this mobile version?
Yes. This code only loads the mobile video if the screen width is 767px or less. Your desktop version remains completely untouched and fully functional.
3. Where should I host my background video?
Squarespace doesn’t host videos directly, but you can upload your .mp4 file inside Design → Custom CSS, which will generate a public link you can use in your code.
4. Is this method compatible with all Squarespace 7.1 templates?
Yes, this technique works with all Squarespace 7.1 templates, as long as you properly target the data-section-id of your desired section.
5. What happens if the video doesn't load on a mobile device?
We recommend adding a background-color fallback in the JavaScript or a background image in the section settings, so your content still looks clean and functional.
6. Where exactly should I paste the JavaScript code?
You have two options:
Page Settings → Advanced → Header Code Injection (Recommended)
Inside a Code Block placed at the bottom of the section (for advanced users only)
7. How do I find the correct section ID?
Right-click on your section > Inspect > Look for a line like:
<section data-section-id="your-section-id">
Then copy the value of data-section-id and use it in your code.
8. Can I use autoplay, mute, and loop for mobile video?
Yes, all those attributes (autoplay, muted, loop, playsinline) are included in the code to ensure smooth mobile playback without user interaction.
9. Will this slow down my mobile site?
Only slightly. For best performance:
Use compressed .mp4 files
Keep your video under 5–10MB
Use fast-loading servers (Squarespace’s CDN is sufficient)
10. Can I style the section or overlay text over the mobile video?
Absolutely! You can add CSS like:
@media only screen and (max-width: 767px) {
section[data-section-id="your-id"] .sqs-block-content {
position: relative;
z-index: 1;
}
}
This ensures all content stays visible above the video.
