The Wistia extension for Webflow lets you browse your Wistia library and add videos to your site without leaving the Webflow Designer. Connect your account, find a video or Channel, and insert it onto the canvas with one click. Videos are displayed with the full Wistia player, including SEO value and engagement analytics—no embed code needed.
Connect to Wistia in Webflow
To get started, open a new or existing Webflow site.
In the Webflow Designer, search for and open the Wistia extension.
Click "Log into Wistia account".
Sign in on the Wistia page that opens to authorize the integration.
Tip
If you don't have a Wistia account yet, create one when prompted, verify your email address, then return to Webflow and refresh. Once you're signed in, the extension opens straight to your library.
Install the Wistia for Webflow app
In addition to connecting the integration directly from the Webflow Designer, you can also install the Wistia for Webflow app from the Webflow Marketplace: https://webflow.com/apps/detail/wistia
On the Wistia app page, click "Install App" to authorize and connect the integration.
Once installed, you can open the Wistia extension from the "Apps" tab in the Designer.
Find a video or Channel
When you're connected, the extension opens the chooser, where you pick what to add:
Folders — your collections of individual videos.
Channels — your Wistia Channels, which work like playlists.
Use the search bar at the top to search across your library by title, description, transcript, and tags.
Upload a video from Webflow
You can also add a video to your Wistia library without leaving the Webflow Designer:
Open a folder in the chooser and click "Upload here".
Select a video from your device to upload to the folder.
The uploaded video appears in the folder, ready to insert.
Insert a video
In the chooser, click into the video you want to open its details.
On the canvas, select where you want the video to go. The Insert button updates to show the destination, like "Insert into Div Block" or "Insert after Image". If nothing is selected, the video is added at the end of the page.
Click the Insert button. You may need to scroll down in the extension panel to see it.
Wistia adds the video to the selected element as a standard Webflow video block. It comes in as a responsive, ad-free Wistia player that scales to fit its container across screen sizes.
From a video's details pane, the following options are also available:
Copy URL — copy the video's URL.
View in Wistia — open the video in Wistia to customize it.
Player styles from Webflow variables
To match the player to your brand, create a Variable Collection named Wistia in Webflow's Variables panel, then add any of these variables to it (names must match exactly):
Player Color (color)
Captions Text Color (color)
Captions Background Color (color)
Rounded Player (size, in px)
Captions Font Family (font)
The extension reads these each time you insert a video. Variables outside the Wistia collection are ignored, and anything not set falls back to the video's settings in Wistia. To customize anything beyond these, click "View in Wistia" and adjust the video in your Wistia account. For more information on variables, refer to Webflow's documentation.
Insert a Channel
In the chooser, open the "Channels" tab and select a Channel.
On the canvas, select the element where you want to embed the Channel.
Click "Insert."
Channels are added as a responsive embed inside a div with the class Wistia Embed Wrapper. To resize or position the Channel, style that wrapper.
Channels use a custom embed rather than the native video element. Webflow variable overrides don't apply to Channels; to change a Channel's styling, click "View in Wistia" and customize the Channel embed there.
Embed without the Wistia extension
You can also paste a Wistia link into Webflow's Video element. Use the video's share link, not the link to its media page in your account (URLs ending in /manage won't play on external sites). For full control over embed options, copy the embed code from Wistia and paste it into a Webflow Embed element.
Disconnect the Wistia app in Webflow
To disconnect your Wistia account, click "Disconnect" at the top of the extension panel. For security, the connection expires after 90 days, and you'll be asked to sign in again.
Troubleshooting
"Your Wistia connection ended. Sign in again to continue."
Click "Log into Wistia account" to reconnect.
"Couldn't reach Wistia" or "Your Wistia library couldn't be opened."
Check your connection and click "Try again". If it keeps failing, click "Disconnect and start over".
"Could not find anywhere to place the embed."
Open a page in the Designer, then try inserting again.