Squarespace Embed Iframe

How to Embed an Iframe in Squarespace

Step 1: Get the Embed Code

Most services that support embedding provide an iframe code. On YouTube, click Share then Embed and copy the iframe snippet. On Google Maps, click Share then Embed a Map and copy the HTML. On Calendly, Typeform, and similar tools, look for an Embed option in their sharing or integration settings. The embed code will be an HTML tag starting with <iframe.

Step 2: Add a Code Block in Squarespace

Open the page editor, click the plus icon where you want the iframe to appear, and select Code from the block menu (under More if not immediately visible). Paste the iframe code into the Code Block editor. Set the display mode to HTML (not Markdown) using the toggle at the bottom of the editor.

Step 3: Save and Preview

Click Apply to save the Code Block. The iframe should render immediately in the page preview. Check that the content loads correctly and displays at an appropriate size. If the iframe appears too large, too small, or does not display at all, you will need to adjust the code - which the following sections cover.

Making Iframes Responsive in Squarespace

Most embed codes include fixed width and height values in pixels - like width="600" height="400". These fixed dimensions do not adapt to mobile screens. A 600-pixel-wide iframe overflows on a 375-pixel phone screen, breaking your page layout.

Method 1: Set Width to 100%

The simplest fix is to change the iframe's width attribute from a fixed pixel value to width="100%". This makes the iframe fill the available container width on any screen size. Keep the height attribute as a fixed value or adjust it proportionally.

Method 2: Responsive Wrapper with Aspect Ratio

For iframes that need a specific aspect ratio (like videos), wrap the iframe in a responsive container div. This technique uses padding to maintain the correct proportions at any width:

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"><iframe src="YOUR_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe></div>

The padding-bottom: 56.25% creates a 16:9 aspect ratio container (56.25% = 9/16 × 100). Change the percentage for different ratios: 75% for 4:3, 100% for 1:1 (square). For a complete CSS walkthrough, our guide to adding custom CSS to Squarespace covers responsive techniques.

Method 3: Max-Width Constraint

If you want the iframe to be responsive but not fill the entire page width, wrap it in a container with a max-width value:

<div style="max-width:800px;margin:0 auto;"><iframe src="YOUR_URL" width="100%" height="500" frameborder="0"></iframe></div>

This centers the iframe and limits it to 800 pixels on wide screens while allowing it to shrink on narrower screens.

Common Iframe Embeds for Squarespace

Google Maps

Embedding Google Maps adds an interactive map to your contact page or location section. Get the embed code from Google Maps (Share > Embed a Map), paste it into a Code Block, and set the width to 100% for responsive display. Add a max-width container if you do not want the map to span the full page width.

YouTube and Vimeo Videos

While Squarespace has a native Video Block, iframe embedding gives you more control over parameters - autoplay, loop, start time, and controls visibility. Use the responsive wrapper technique with 56.25% padding for 16:9 video aspect ratio. Add loading="lazy" to the iframe tag to delay loading until the visitor scrolls to the video.

Booking and Scheduling Widgets

Calendly, Acuity, and similar tools provide iframe embed codes that display a booking calendar on your page. These widgets are typically taller than they are wide, so set an appropriate fixed height (600 to 800 pixels) and width to 100%. Test the booking flow on mobile to ensure visitors can select dates and times comfortably on a phone screen.

Forms and Surveys

Typeform, Google Forms, JotForm, and other form tools offer iframe embeds. Set the width to 100% and height to match your form's length. For long forms, consider using the service's popup or slider embed option instead of an inline iframe to avoid excessive page length. For embedding techniques, our guide to HTML code embedding on Squarespace covers all common embed types.

Spotify and Audio Players

Embed Spotify playlists, podcasts, or tracks using their iframe embed code. Spotify embeds come in compact (152px height) and full-size formats. Set width to 100% and choose the height that fits your page layout. Wrap in a max-width container for centered display on wide screens.

Styling Iframes to Match Your Squarespace Site

Add borders and rounded corners. Use CSS to add a border, box shadow, or border radius to the iframe or its container. This helps the embedded content feel like part of your page rather than a foreign element dropped in.

Add spacing around the iframe. Embedded content with no margin looks cramped against surrounding elements. Add margin or padding to the iframe container for visual breathing room.

Match the background. If the iframe content has a white background and your section has a dark background (or vice versa), the contrast creates a jarring visual break. Choose a container background color that bridges between your section and the iframe content. For design consistency, our Squarespace design tips guide covers color and spacing principles.

Troubleshooting Iframe Issues on Squarespace

Iframe Not Displaying

Check that the Code Block is set to HTML mode. Verify the iframe URL uses HTTPS - Squarespace enforces HTTPS, and an HTTP iframe URL will be blocked by the browser's mixed content security. Also check that the source website allows embedding - some sites set X-Frame-Options headers that prevent their content from being loaded in iframes on external domains.

Iframe Overflows the Page on Mobile

Replace fixed pixel widths with width="100%" or use the responsive wrapper technique. Add overflow: hidden to the container div to prevent any overflow from breaking your page layout.

Iframe Content Loads Slowly

Every iframe loads an external webpage, complete with its own scripts, styles, and resources. This adds to your page load time. Add loading="lazy" to the iframe tag to defer loading until the visitor scrolls to it. Limit the number of iframes per page - each one adds a separate network request. For page speed strategies, our Squarespace page speed guide covers script and embed optimization.

Iframe Interaction Blocked on Mobile

Some mobile browsers restrict scrolling within iframes, making it hard for visitors to interact with embedded forms or maps. Add -webkit-overflow-scrolling: touch to the iframe container's CSS for smoother scrolling on iOS devices. For mobile-specific fixes, our guide to Squarespace mobile optimization covers embedded content on small screens.

Embed External Content That Feels Native

Iframes are the standard way to bring external content - maps, videos, forms, booking tools, and media players - into your Squarespace pages. The key is making them responsive, visually consistent with your design, and fast-loading. Set widths to 100%, use aspect ratio wrappers for videos, add lazy loading, and test on mobile.

A well-embedded iframe enhances your page by adding functionality you could not build yourself. A poorly embedded one breaks your layout and slows your site. Take the extra five minutes to get it right.