Skip to main content

Embed Videos in Squarespace

The Wistia player is a perfect fit for any Squarespace site.

Written by Harper

Squarespace is a popular no-code CMS platform that makes it easy to build an eye-catching website. We'll walk through the simplest ways to embed a Wistia video on your Squarespace site.

Recommended embed settings for Squarespace:

  • Inline (Standard) embed

  • Responsive sizing

OR

  • Use oEmbed URL

Add video with the Squarespace embed block

The Squarespace embed block is easy to use and offers significant flexibility. Embed via URL or use HTML embed codes—the choice is yours, though embedding via URL is the simplest option.

Refer to Squarespace's documentation for an in-depth overview of the embed block.

Note

Squarespace's video block doesn't support Wistia links or embed codes. If you paste a Wistia embed code or URL there, it won't work. Always add an embed block instead, then paste your oEmbed URL in the Link field or your embed code in the Code Snippet field.

Squarespace often doesn't show a video preview in the editor. If you see "Script Disabled" or a blank block, save your page and check the live site.

Inline video embed

For inline video embeds, open the "Embed" menu in Wistia and check the "Use oEmbed URL" option in "Advanced Options".

In Squarespace, add an embed block to your page:

  • In the Squarespace editor, click "Add Block" and select the "Embed" option.

  • In the "Link" field, paste the Wistia oEmbed URL.

If the Wistia media URL is valid, you'll see a "Successfully located" message and a thumbnail preview of the video.

Note
If you see a "Script Disabled" message or a blurry thumbnail image, don't worry—this is only visible in the editor. Save and view your published page for the final results.

Popover video embed

To embed a popover video using URLs, start by copying the Inline embed as explained above. Then, change the embedType option in the URL to async_popover:

  • From the embed menu, select an inline embed (any type)

  • Choose responsive sizing

  • Enable "Use oEmbed URL" in the Advanced Settings menu

  • Click "Copy Code"

The URL will look something like this:

https://wistia-help-center-videos.wistia.com/medias/ew90fxg6lg?embedType=web_component&seo=true&videoWidth=960

In the URL, you'll see an embedType option like web_component, async, or iframe. Change this value to say embedType=async_popover instead:

https://wistia-help-center-videos.wistia.com/medias/ew90fxg6lg?embedType=async_popover&seo=true&videoWidth=960

Now paste your popover URL into the Squarespace embed block and check your published page!

Embed with HTML embed code

To use HTML embed codes, select your embed type and options from the Wistia embed menu, and disable the "Use oEmbed URL" option under "Advanced Settings". This works for both Inline (any type) and Popover embeds.

  • In the Squarespace editor, click "Add Block" and select the "Embed" option.

  • Paste your Wistia embed code in the "Code Snippet" field.

The embed block should update with a video preview as soon as you paste the code. Save and admire your published page!

Update older embed codes

If you embedded Wistia videos on your Squarespace site before late 2024, those embeds may use an older embed code that no longer displays correctly. To fix this, copy a fresh embed code from the Embed menu and replace the old code in your Embed block. To find every page a video is embedded on, open the video's Stats page and check where it's embedded.

Troubleshooting

There's extra white space below my video

This can happen with the oEmbed URL method. Switch to the HTML method: turn off Use oEmbed URL, copy the embed code, and paste it into the Embed block's Code Snippet field.

My video is too large or stretches edge to edge

Responsive embeds fill the width of the block they're in. To make the video smaller, choose Fixed size and set a width, or use a popover embed instead. To show a group of videos, try embedding a Channel.

My video flickers black before it plays

Don't edit or remove any part of the responsive embed code, including the padding wrapper. That code keeps the video sized correctly while it loads. Copy a fresh embed code and paste it back in unchanged.

Captions show even though they're off by default

If you used an LLM-friendly embed, captions are on by design, so the transcript text is visible on the page. To use your own caption settings, embed with the standard Inline embed code instead.

Did this answer your question?