How to Embed Borderless, Autoplaying, Looping iframe Videos on Squarespace 7.1
Embedding videos using an <iframe> is one of the easiest and cleanest ways to add dynamic content to your Squarespace site.
If you set it up properly, your video will:
Autoplay automatically
Loop forever
Show no borders, frames, or controls
Be fully responsive on mobile and tablet
This technique is perfect for:
Hero sections (top of homepage)
Background videos
Landing pages
Portfolios or brand showreels
In this guide, I’ll show you step-by-step how to embed a borderless, autoplaying, looping iframe video inside Squarespace 7.1 — the right way!
Let's get started!
Step-by-Step Guide
Step 1: Choose Where to Host Your Video
You cannot directly iframe videos uploaded to Squarespace’s file manager.
So you need to host your video externally, usually on:
Vimeo ( Best for clean embeds)
YouTube ( Slight limitations: branding still shows)
Vimeo is recommended if you want:
No play buttons
No controls
Full background videos
Step 2: Get the Correct Video URL
Suppose your video is uploaded to Vimeo, and your video link is:
https://vimeo.com/123456789
You’ll embed it using Vimeo’s special iframe player.
Step 3: Create the iframe Embed Code (Correctly)
Paste this code into a Code Block inside your Squarespace page:
<div class="video-wrapper">
<iframe
src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&muted=1&background=1"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
style="border: none; outline: none; display: block;">
</iframe>
</div>
VERY IMPORTANT URL SETTINGS:
autoplay=1 → Start automatically
loop=1 → Repeat forever
muted=1 → Required for autoplay to work in browsers
background=1 → Hide all Vimeo controls for a clean look
Replace 123456789 with your real Vimeo video ID.
Step 4: Make It Responsive (Fix Auto Height Problem)
By default, iframes don’t resize automatically.
We need to wrap the iframe inside a special container with CSS to make it responsive.
Add This Custom CSS:
Go to Design > Custom CSS and paste:
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
This CSS:
Maintains the correct aspect ratio
Makes the video scale with the screen size
Ensures no borders or scrollbars
Mobile Behavior
This method will ensure:
Your iframe video autoplays even on mobile
No fullscreen hijack
Smooth scaling on all devices
Full Final Working Example:
<div class="video-wrapper">
<iframe
src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&muted=1&background=1"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
style="border: none; outline: none; display: block;">
</iframe>
</div>
Plus the custom CSS:
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
Conclusion
By following this guide, you’ve now learned how to seamlessly embed a borderless, autoplaying, and looping iframe video inside your Squarespace 7.1 site using Vimeo.
Your video now:
Autoplays silently as soon as the page loads
Loops continuously without user interaction
Hides all borders, buttons, and Vimeo controls for a sleek, modern look
Scales responsively on all devices — desktop, tablet, and mobile
This method is perfect for:
Hero banners
Minimalist landing pages
Video showreels and brand intros
Full-screen section backgrounds
And best of all — no plugins, no Developer Mode, and no external tools required. Just clean iframe markup + a little responsive CSS.
If you're aiming for a high-impact, visually dynamic website, this borderless iframe embed technique gives you total design control with very little effort.
FAQ: Embedding Borderless, Autoplaying iframe Videos in Squarespace 7.1
1. Can I upload the video directly to Squarespace and embed it with an iframe?
No. Squarespace does not support iframe embedding for videos uploaded to its file manager. You’ll need to host your video externally — preferably on Vimeo (best for clean, control-free embeds) or YouTube (adds branding).
2. What makes Vimeo better for this type of video embed?
Vimeo allows you to customize the video player experience using URL parameters like:
autoplay=1 – automatically plays the video
loop=1 – loops the video forever
muted=1 – required for autoplay to work on most browsers
background=1 – hides all player controls and branding
This gives you a clean, background-style video with no UI clutter.
3. Why is muted=1 required for autoplay?
Most modern browsers block autoplay with sound to protect the user experience. By muting the video (muted=1), browsers allow it to autoplay smoothly across all devices.
4. How do I remove the borders and scrollbars from the video?
The combination of:
border: none;
outline: none;
overflow: hidden;
Inside both your inline iframe styles and the .video-wrapper container, ensure zero borders, no scrollbars, and a clean, full-width appearance.
5. How do I make the iframe responsive on mobile?
Use the recommended CSS wrapper:
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* for 16:9 aspect ratio */
height: 0;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
This allows the iframe to scale proportionally based on screen size, ensuring responsiveness across desktop, tablet, and mobile.
6. Can I use this method for background videos in hero sections?
Yes! This technique is ideal for hero banners, full-screen backgrounds, and landing page intros. Just make sure to place the code block inside the correct section and set z-index or positioning as needed with additional CSS if layering content.
7. Will this video autoplay on iPhones and iPads?
Yes — as long as it's muted, iOS supports autoplaying videos in iframes. That’s why muted=1 is a critical part of your embed URL.
8. Can I use YouTube instead of Vimeo?
You can, but YouTube doesn’t support a true “background” parameter and will always show some branding, even if controls are hidden. For professional design use cases, Vimeo is preferred for a clean look.
9. Do I need Developer Mode or a plugin to do this?
No. Everything is done using:
A simple Code Block (for the HTML)
Squarespace’s Design → Custom CSS panel (for styling)
No Developer Mode or third-party plugin required.
10. Will this affect site performance?
Autoplaying videos can impact load speed, so use compressed video files on Vimeo and avoid adding multiple autoplaying videos on a single page. That said, this method is lightweight and doesn’t require external JavaScript or heavy scripts.
