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 Pages → Custom Code → Custom CSS
.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.
Frequently Asked Questions
-
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).
-
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.
-
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.
-
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.
