How to embed an Iframe on Squarespace
Iframes are invaluable for embedding some external content types into Squarespace pages. Here’s a comprehensive overview of Iframes on Squarespace.
Key points covered in this post
To embed an Iframe on a Squarespace site you’ll need to use a Code block
Code blocks are not available on Personal subscription plans
How to embed an Iframe in a Code block
Built in blocks offer alternatives to Iframes that work on all subscription plans, including Personal, though not for all content types
The top 5 most common reasons when Iframes don’t work on Squarespace sites
Are Iframes included in your Squarespace plan?
Adding Iframes to code blocks is a premium feature only available in Business, Commerce, Professional, and Premium plans.
How to Embed an Iframe in a Squarespace Code block
Embedding an iframe into your Squarespace site involves a few straightforward steps:
Log Into Squarespace: Access your Squarespace account and navigate to the page where you'd like to embed the iframe.
Insert a Code Block: Choose the specific location for your iframe and add a Code block from the Squarespace editor's options. IMPORTANT - Iframes in code blocks are only supported on Business and Commerce plans.
Paste the Iframe Code: Obtain the iframe code from the external content you wish to embed (e.g., a YouTube video or Google Map), and paste this code directly into the Code block. You may need to adjust the width and height attributes in the code to ensure it fits well with your page design.
Ensure Responsiveness: To maintain a great viewing experience on mobile devices, make sure the iframe content is responsive. This might involve setting specific CSS rules within the iframe code or using Squarespace's built-in responsive design settings.
If you have questions about anything Squarespace,
why not drop me a line or book a meeting?
Top 5 reasons why an Iframe might not work properly on a Squarespace site
You’re on a Personal plan - Iframes are disabled on Squarespace Personal plans. They are supported on all other Squarespace plans. During your free trial you will be able to embed Iframes but they will not work if you sign up to a Personal plan when you are ready to launch your website. Before you upgrade your plan you should check that the problem is not one of the following.
You’re logged in to your site’s admin - For security reasons, code within an Iframe might not be visible to you while you're signed in, although it could be visible to visitors. This issue often arises when attempting to view embedded JavaScript through a secure connection (https://). To verify this, please access your site using its production url or, if you’re still on a free trial check it using an incognito browser window.
The iframe content is on an insecure domain - If the Iframe embed link starts with http:// rather than https:// it will be treated as potentially insecure and blocked. This is a security feature of web browsers rather than a Squarespace feature.
The content you’re trying to insert via iFrame is preventing embeds - Many site owners don’t want people to embed their content. They use things like a Content Security Policy or X-Frame-Option to prevent embedding. This can be because they don’t want their content on other people’s sites or because embedding sites in an Iframe can be leveraged as a security exploit by hackers.
The Iframe content is blocked by CORS - Cross Origin policies can prevent certain resources from being embedded in an Iframe. If so, you would expect to see an error when you Inspect the page and view the Console.
Alternatives to Iframes: Squarespace's Built-in Blocks
While iframes are versatile, Squarespace's own blocks offer a more integrated solution for embedding certain types of content:
Audio block - Useful for featuring a single Podcast episode or to upload (or link to) a single mp3/m4a audio file.
Map block - Enter and address and (optional) business name to embed a Google Map - More at Squarespace Support
Embed block - Can be used to pull content from services including Facebook, Wistia and Animoto that use the oEmbed standard. Will also work with some manually set embed codes. More @ Squarespace. The Embed block is a Premium block not available on Personal subscription plans.
Video block - Allows easy integration of YouTube or Vimeo videos as well as videos that you upload to your Squarespace site. See this Support article
