How to embed an iframe in Squarespace

Steps

1. 1

   Step 1: Edit a page or post

   Open the page where the frame must show.

2. 2

   Step 2: Click Add block, then click Code

   Hover over the section and click Add block or + to open the block menu.

3. 3

   Step 3: Click the pencil icon and paste the iframe code

   Keep the Mode menu set to HTML. Keep Display Source off, or the block shows the code as text.

4. 4

   Step 4: Save, then check the page logged out

   For safety, code sometimes does not show while you are logged in. Open the page in an incognito window, or click Preview in Safe Mode.

5. 5

   Step 5: For an oEmbed link, use an Embed block

   Click Add block, then Embed, and enter the URL. You can also click Code snippet, then Embed Data, and paste embed code.

Limits

• An iframe or JavaScript in a code block needs the Core, Plus, or Advanced plan, or some legacy billing plans.

• A code block holds 400 KB, about 300,000 characters.

• Code may not show on a page inside an index page, or when Ajax loading is on.

• The Embed block takes URLs from services that use the oEmbed standard, or embed code that you paste.

• Squarespace support does not help add or troubleshoot custom code.

Troubleshooting

The frame is blank while you are logged in

For safety, Squarespace sometimes hides code from logged-in users. Check the page in an incognito window, or click Preview in Safe Mode.

Blank iframe, no error →

"Refused to connect" in the frame

The framed site sends X-Frame-Options or a CSP frame-ancestors rule. Only the owner of that site can change it.

"Refused to connect": cause and fix →

The frame is cut off on phones

The code sets a fixed width in pixels. Set the width to 100% and use an aspect ratio for the height.

Responsive iframes →

Related