How to Use Embed Blocks in Squarespace
Embed blocks let you add external content like videos, social media posts, and interactive elements to your Squarespace site. They're simple to use once you know the basics.
TL;DR:
- Embed blocks pull in external content from platforms like YouTube, Twitter, and Instagram
- Use direct URLs for oEmbed-compatible services or paste embed codes for others
- You can customise autoplay settings and add custom thumbnails for videos
- Common issues include incorrect URLs or embed codes that need updating
- Log out to test your embeds as visitors see them
Adding Video Content
Most video platforms make embedding straightforward. Here's how to do it:
Find your embed code or URL
Look for a 'Share' or 'Embed' button on the video page. YouTube, Vimeo, and similar platforms usually place this near the video player.
Add the embed block
In your Squarespace editor, click where you want the video to appear, then select 'Embed' from the content blocks.
Configure your settings
Paste either the direct URL or the full embed code into the block. For oEmbed-compatible services (like YouTube), the URL alone often works fine.
Customise the display
You can upload a custom thumbnail image that shows before the video plays. Adding a thumbnail disables autoplay, so choose based on what works better for your content.
Quick tip: If a direct URL isn't working, try switching to the code snippet view and pasting the full embed code instead.
Embedding Social Media and Other Content
The process works the same for tweets, Instagram posts, and other embeddable content:
Get the embed code
Most social platforms have a 'Share' option that includes an embed code. Copy the entire code snippet.
Insert and test
Paste the code into your embed block and preview your page. If it's not displaying properly, double-check that you've copied the complete code.
Check compatibility
Some platforms change their embed codes regularly. If something stops working, grab a fresh embed code from the source.
Troubleshooting Common Problems
"Enter a valid embed URL or code" error
This usually means the URL or code you've pasted isn't recognised. Try these steps:
- Double-check you've copied the complete embed code
- Make sure the original content is still live and public
- Try getting a fresh embed code from the source platform
Content not showing up
The most common cause is that you're logged into the original platform, so you can see content that visitors can't.
Log out of your site and view it in an incognito window. If the embed still doesn't appear, the code might be incorrect or the source content might be set to private.
Embed looks wrong or cuts off
Some embed codes include fixed width and height values that don't play well with responsive design. You might need to edit the code to remove these restrictions or use a code block instead for more control.
When to Use Code Blocks Instead
Embed blocks work great for standard content, but sometimes you need more control. Consider using a code block if:
- The embed block doesn't recognise your URL or code
- You need to modify the embed code for better mobile display
- You want to add custom styling or behaviour
- The platform doesn't support oEmbed
Code blocks give you complete control but require more technical knowledge.
FAQs
Can I make videos autoplay?
Yes, but it depends on the platform and browser settings. Most browsers now block autoplay with sound, so autoplaying videos will be muted by default.
Why isn't my Instagram embed working?
Instagram occasionally changes their embed system. Try getting a fresh embed code, and make sure the original post is still public.
Can I embed content from any website?
Only if the website provides embed codes or supports oEmbed. You can't embed content from sites that don't specifically allow it.
Do embeds slow down my site?
They can, since they load external content. Most platforms optimise their embeds for speed, but having many embeds on one page might affect loading times.
Jargon Buster
oEmbed – A standard that lets websites automatically create embeds from URLs. Sites like YouTube and Twitter support this.
Embed code – HTML snippet provided by external platforms to display their content on your site.
Code block – A Squarespace block where you can add custom HTML, CSS, or JavaScript code.
Autoplay – Setting that makes videos start playing automatically when someone visits your page.
Wrap-up
Embed blocks are one of the easiest ways to add dynamic content to your Squarespace site. Start with simple embeds like YouTube videos or tweets to get comfortable with the process.
Remember that external content depends on the original platform staying online and keeping their embed systems working. Always test your embeds after adding them, and check them occasionally to make sure they're still working properly.
Most embed issues come down to incorrect codes or privacy settings on the original content. When in doubt, grab a fresh embed code and test it in an incognito window.
Ready to dive deeper into Squarespace customisation? Join Pixelhaze Academy for step-by-step tutorials and expert support.