Putting media on your website is the best way to get your message across. The act of putting media on your website is called embedding, and in this guide we’ll show you how to get it done right.
Pre-Embedding
Once you’ve uploaded and customized your media, you’re ready to go ahead and embed. Huzzah!
Fun fact: even after you’ve embedded an episode to your website, you can still make changes to it in Customize. Those changes will automatically update your media anywhere it’s embedded. If you want to use different customizations across multiple embeds of the same media, you can make multiple copies of the media or use advanced embed options in your embed codes.
Generate an Embed Code
An embed code is a snippet of code that you can use to add content (like a video!) to a web page.
To generate an embed code for your media, start by clicking “Embed” on your media age. That will open the “Embed Media” modal, where you can choose your embed code type and fine-tune it for your page.
There are two main types of Wistia embed codes: Inline embeds and Popover embeds. Read on to learn more about both!
Inline Embeds
From a folder
Inline embeds will place the player directly on the page, inline with the rest of your content. Here’s an example “Standard” inline embed:
This is what a standard inline embed code looks like:
<script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script> <script src="//fast.wistia.com/assets/external/E-v1.js" async></script> <div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px"> </div>
Feel free to grab that embed code to try it out, or go to your Wistia account and get an inline embed code for you own video or audio episode!
Within the “Embed Media” modal, you can view a preview of your embed, and set it to be responsive, or fixed size. Click “Show Embed Code” to see the code, and when you’re ready to embed, click “Copy Code.”
Tip
Wistia embeds are extremely configurable, and lots of fun to work with (if we may say so ourselves). If you want to get fancy with our JavaScript API 💃, this link is for you.
From a Channel
If you’re sharing a Channel, the process is basically the same as for a folder, but you’ll access the embed codes in a slightly different way. First you’ll want to navigate to the Channel preview page by clicking the Edit/Preview Channel button.
Once you’re on the Channel preview page, click "Embed & Share" to access the embed and share modal. You’ll see several options to generate an inline embed code!
Embedding a Transcript
You can embed transcripts alongside your videos on your website. In the embed modal, open the Transcript tab to generate an embed code for an existing transcript.
Fallback (iframe) embed
In a folder
If you need to use an iframe to embed your media, look no further than our fallback option. In the embed modal, click "Advanced Settings," and scroll down to access the fallback option.
An iframe is an HTML component that acts like a window into another webpage and will allow you to embed your Wistia media onto your site. Although we highly recommend going with our standard inline embed code, the iframe is a reliable option if you can’t include JavaScript on your website.
Think of it like a Subaru Impreza: simple, reliable, and if you ask us, a pretty nice way to get from point A to point B.
Here’s an example of a fallback inline embed code:
<iframe src="https://fast.wistia.net/embed/iframe/76s5twgvtw?seo=true&videoFoam=false" title="Lenny's Halloween Costume Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" msallowfullscreen width="620" height="349"></iframe>
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>
In a Channel
At this time we do not have iframe embed codes available for Channels.
Popover Embeds
In a folder
Popover embed codes make your medias pop over the rest of your content instead of playing inline.
Within the embed modal, click into the “Popover” tab. From here, you can choose how you’d like to display your popover. You can launch a popover media with either a text link or thumbnail image. When clicked, that link will open a lightbox with your media inside.
Here’s a popover embed code:
<script src="//fast.wistia.com/embed/medias/hfhtu17gah.jsonp" async></script> <script src="//fast.wistia.com/assets/external/E-v1.js" async></script> <span class="wistia_embed wistia_async_hfhtu17gah popover=true popoverAnimateThumbnail=true" style="display:inline-block;height:169px;width:300px"> </span>
Copy and paste that into your website to give it a try! Be sure to read the section on Responsive Design with Popover Embeds as well.
Tip
If you would like to modify the behavior of your popover embed beyond what the options in the Embed & Share screen provide, check out the Popover Customization page.
In a Channel
Creating a Popover is as quick as breaking a few eggs and mixing in some flour and milk! Make sure to preheat the oven to 400 degrees and, wait, wrong kind of Popover.
Okay, now that I’ve had a snack, navigate to the "Embed & Share" modal from your Channel's preview page, and click into the "Popover Embed" tab. Select "Responsive" or "Fixed" size and copy the code from there.
Embedding Responsively
Responsive media looks great on all screen sizes. Responsiveness works a bit differently for inline embeds and popover embeds, so let’s dig into both separately here 👇.
Responsive design with inline embeds
Inline embed codes are responsive by default, meaning that your media will automatically resize itself to the width of its container. Hooray!
With a responsive embed, you will never need to manually adjust the dimensions of your embed code. If the player isn’t quite the right size, try adjusting the width of its parent container on your webpage first. If you get stuck, just reach out to our Customer Happiness team!
If you need to set the player to specific dimensions though and don’t want it to be responsive at all, just switch to the "Fixed Size" option and choose a width or height. The dimension you don’t adjust will automatically change to maintain the aspect ratio of your media.
Here’s an example of a responsive embed to play with:
<script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script> <script src="//fast.wistia.com/assets/external/E-v1.js" async></script> <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"> <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"> <div class="wistia_embed wistia_async_s3lqfi0zn7 seo=false videoFoam=true" style="height:100%;width:100%"> </div></div></div>
Responsive design with popover embeds
With popover embeds, there are two separate things to consider:
The responsiveness of the thumbnail image (unless you’re using a text link).
The responsiveness of the media itself, when it’s “popped over” the page.
The thumbnail of a popover embed is not responsive by default. But if you want it responsive, that’s as easy as clicking the “Responsive” checkbox:
That’s all it takes to make the thumbnail responsive. Wahoo!
The media component of a popover embed is responsive by default. Since the media “pops” over the rest of the page, it doesn’t have to worry about bumping into anything else. It will automatically fill up most of the page, leaving some comfortable space between the media and the edges of the browser window.
Note
Looking for the responsive or fixed option on a Channel embed? It will be the 3rd option down just before the code box in the share tab! The default setting is set as responsive.
Media SEO
Media SEO is a set of tools and processes to help search engines identify and index your media. Wistia’s Standard embed codes are automatically SEO-friendly, and they’ll help people find your media on your website.
Check out the Video SEO help page for more detail 🔍 and tips on getting Video SEO done right.
Email Campaign Link
Email is a great way to share your media and re-engage with your growing audience.
Note
Email Campaign Links are not currently available for audio files.
Share Link and Social Sharing
In a Folder
If you are sharing a media from a folder, you can copy the direct link to your Wistia media and share it with the world. Viewers who are given this link will only have access to this single media and not the rest of your folder.
From the media's page, click "Share" to see all of the share options, including the ability to share your content on social media platforms like Facebook and X.
In a Channel
If you are sharing your Channel, you can copy the direct link to your Wistia Channel and share it widely. Viewers who are given this link will be able to view your entire Channel.
To generate a link, click "Embed/Preview Channel" and from here, click "Embed & Share." In the popup modal, click into the "Share Link" tab to copy a direct link.
Note
You will not be able to customize the URL.
Share an individual episode from a Channel
Let’s say you want to direct someone to your newest podcast or Channel episode. Instead of sending them the Channel and having them look for the specific media, you can send someone a link to just that episode!
Head to your Channel overview page and click the media you wish to share. In the edit modal, click "Copy Link."
Publish to Social
From within the share modal, click into the "Publish to Social" tab share your content on Facebook, YouTube, and/or LinkedIn.
Check out our Publish to Social page to learn how to get these integrations set up and collect those sweet, sweet social stats!
Note
Publish to Social is not currently available for audio files.
Protecting Your Embeds
Want to make sure your media can only be played on your website (and of course, within your Wistia account)? Check out Domain Restrictions for that. For more information on keeping your media secure, see the Security guide.
Embedded Media Stats
Now that your media is embedded on your webpage, you can use Wistia’s analytics to see how your viewers are interacting with the content. Read up on Wistia’s analytics functionality.
Troubleshooting Embed Issues
Embedding can be tough! If you’re stuck, check out the Embed Troubleshooting documentation.
If something seems fishy on Wistia’s side of things, you can always check out our Status Page for more information about what might be going on. Still no luck? Contact us. We’d be more than happy to help you out!