Putting video on your website is the best way to get your message across. The act of putting a video on your website is called embedding, and in this guide we'll show you how to get it done right.
Fun Fact: Even after you embed a video on your website, you can make changes to it in Customize. Those changes will automatically apply anywhere your video is embedded. If you want to use different customizations across multiple embeds of the same video, you can make multiple copies of the video 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. When a person visits your website, their web browser will interpret the embed code as a set of instructions to display your video on the page.
Wistia embed codes come in a few flavors, and they each are great for different purposes. The best type of embed code to get started with is an iframe embed. For more advanced embedding, check out the API, SEO, and popover embed code types.
To generate an embed code for your video, start by selecting the Embed & Share option under themenu from your video's page in Wistia. That will open the Embed & Share screen, where you can choose from one of several embed code types and set the dimensions (in pixels) for your video:
The dimensions of your embed code will scale proportionally with the dimensions of your original video, so you only need to set the width – we'll make sure the height matches automatically.
To make your video responsive, check out Video Foam.
Inline Embed Types
There are three types of inline embed code types: iframe, API, and SEO. They all display "in line" on the page and look exactly the same. So why would you use one type of inline embed over another? Read on to find out!
The iframe embed code type is like a Subaru Impreza: simple, reliable, and if you ask the Wistian writing this documentation, a pretty nice way to get from point A to point B.
An iframe is an HTML element that lets you display content from one webpage in a special box on another page. Think of it as a cut-out box on a piece of paper. If you cut a rectangle into one page and place another page behind it, it will look like all of the content is right there in the main page:
Here's an example Wistia iframe embed code:
1 2 3 4 5
<iframe> ... </iframe> part there is what tells a person's web browser, "Hey! Let's show some content from another web page here!" It then pulls in the content from
fast.wistia.net/embed/iframe/es7g1ii56j, identified in the
src (or "source") attribute, and displays it in a box with the dimensions specified by the
When you insert an iframe embed code like that into a webpage, the video will display inline as seen above.
If you have a video in your account already, trying generating an iframe embed code for it and then add it to your website.
A quick note on our embeds. We use protocol relative URLs as part of our embed codes. This means they will work on SSL-enabled websites without any additional tinkering. They can look a bit funky without the
https you might be expecting, but it can save you headaches when placing your video on your website.
There are many useful ways to customize your embed without modifying the embed code. Check out Customize first!
Let's check out an example API embed code:
1 2 3 4 5
An API embed code works by first creating a blank rectangular box on the page (that's the
<div ...> ... </div> element at the top), and then executing a script that puts a video into the box. The script knows which div to put the video in, because the hashed ID passed into
Wistia.embed matches the ID assigned to the
div – in the example above,
The API embed code is extensively configurable. For more detail on using API embed codes, check out the Player API documentation.
The SEO embed code type is what you should use if you want to help search engines identify and index the video content on your website.
Certain aspects of your video (like the thumbnail image and captions) will be hard-coded into the text of your SEO embed code so search engines can find that information and use it to improve the search results. For this reason, it's important to follow a specific process when using an SEO embed code. Be sure to review the Video SEO documentation if you're getting started with video SEO.
The popover embed code type displays your video in a popover lightbox in front of the main content on your page. You can launch a popover video with either a text link or thumbnail image link. When clicked, that link will open a lightbox with your video inside, like this:
Popover embeds cannot be used for video SEO purposes. Google generally will not index them, because they're not really on the page – they're in front of it!
Here's an example popover embed code:
The popover embed code has three components:
- Either a piece of text or an image. In the example above, this automatically generated thumbnail image:
- Code to turn that text or image into a link, pointing to a video URL like
- A script,
fast.wistia.com/assets/external/popover-v1.js, which causes the link to open in a popover lightbox instead of opening as a separate page.
Pasting your Embed Code onto Your Page
Once you have copied the embed code, the next step is to paste it into your web page editor (which could be a CMS, blog, HTML document, etc.). This is where it gets complicated to talk in specifics, since each website management system is different, but here are some tips:
- Choose the HTML editor setting where possible - not the Visual editor.
- Leave a line above and below your embed code, to make sure it doesn't conflict with other elements on the page.
Styling Your Embed
Centering Your Embedded Video
There are several possible solutions for centering a video inside a
column in your website. The solution that works best for you will depend on the
embed code type you use, and the structure of your website.
For an iframe embed, your embed code normally looks something like this:
<iframe src="//fast.wistia.net/embed/iframe/479268413a" width="960" height="540"></iframe>
One possible solution is to add
display: block and
margin: 0 auto style
attributes to the embed code, like this:
<iframe src="//fast.wistia.net/embed/iframe/479268413a" style="display: block; margin: 0 auto;" width="960" height="540"></iframe>
Another solution for iframes is to set the
parent div (which wraps around the
text-align: center, like this:
1 2 3
For an API embed, the original code might look like this:
<div id="wistia_479268413a" class="wistia_embed" style="width:960px;height:540px;">
margin: 0 auto to the existing style settings, like this:
<div id="wistia_479268413a" class="wistia_embed" style="margin: 0 auto;width:960px;height:540px;">
Centering oEmbed Codes in Wordpress
When using Wordpress and oEmbed codes, first add an outer div with the style
text-align: center;. Then, add a second div with the style
inline-block;, as seen here:
1 2 3 4 5 6 7
Link in Email Campaign & Social Sharing
Protecting Your Embeds
Want to make sure your videos can only be played on your website (and of course, within your Wistia account)? Check out Domain Restrcitions for that. For more information on keeping your videos secure, see the Security guide.
Embedded Video Stats
Now that your video is embedded on your webpage, you can use Wistia's tracking analytics to see how your viewers are interacting with the content.
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!