Warning: You are heading into developer territory!
Our APIs are designed for programmers. If our APIs were a ski trail, they'd be a nice blue cruiser - anyone can do it, but expect to fall a few times if you don't know what you're doing!
If your use case requires you to build lots of embed codes for your videos dynamically, you will want to live by this guide. We'll break down each embed code type, and the best way to generate them.
Embed Code Types
Before we get started, let's define some jargon around embed code types. At this time, the three embed code types you can use with Wistia are:
- iframe - super simple, supported almost everywhere, and easy to build.
- SEO - We've built an embed code optimized for Google's SEO guidelines. This embed code type has the most moving parts, and can be tricky in some over-zealous CMS platforms.
Using the oEmbed Endpoint
Here's a quick primer on using the Wistia oEmbed endpoint, which is the easiest way to generate each of the Wistia embed code types.
Our oEmbed endpoint is:
By default, the endpoint returns JSON, but use
http://fast.wistia.net/oembed.xml to return XML.
Our oEmbed endpoint recognizes two URL formats, iframe embed URLs and public media URLs.
iframe Embed URLs
You can build these for single videos or playlists, or generate them through your account.
Public Media URLs
Public Media URLs are the address to a video in your account.
If you're looking to automatically detect Wistia URLs and run them against our endpoint, we recommend using this regular expression:
Or if you don't speak regex, here's what we're matching:
http(s)://*wistia.com/medias/* http(s)://*wistia.com/embed/* http(s)://*wi.st/medias/* http(s)://*wi.st/embed/*
Note, it's likely we'll add support for more URLs in the future so feel free to use a more general regular expression so you don't miss out on future enhancements! Perhaps this:
The required url parameter that's passed in supports all the options detailed in the Player API.
We also accept some additional parameters that can change the output of the embed code:
|embedType||string||Only applicable to videos and playlists. Accepts iframe, api, seo, popover, playlist_iframe, playlist_api, and open_graph_tags (videos only).|
|width||integer||The requested width of the video embed. Defaults to the native size of the video or 640, whichever is smaller.|
|height||integer||The requested height of the video embed. Defaults to the native size of the video or 360, whichever is smaller.|
|popoverHeight||integer||Only applicable to popover embed type. The requested height of the popover. Defaults to maintain the correct aspect ratio, with respect to the width.|
|popoverWidth||integer||Only applicable to popover embed type. The requested width of the popover. Defaults to 150.|
|ssl||boolean||Determines whether the embed code should use https. Defaults to false.|
If given a width, height, maxwidth, or maxheight parameter (or any combination of those), the other dimensions in the resulting embed code may change so that the video's aspect ratio is preserved.
These parameters are attached to the Wistia media URL, and not the oEmbed call. So they must be URL-encoded to travel with the Wistia URL.
- If an invalid URL (one that doesn't match our regular expression above) is given, the endpoint will return 404 Not Found.
- If an unparseable URL is given in the url param, the endpoint will return 404 Not Found.
- If a media is found but has no available embed code, the endpoint will return 501 Not Implemented. Video, Image, Audio, and Document files all currently implement oEmbeds.
- If a playlist is found but has no videos, the endpoint will return 501 Not Implemented.
iframe Embed Tutorial
Using the oEmbed
Here is how we can get the embed code and some information for a video at
http://home.wistia.com/medias/e4a27b971d in JSON format:
1 2 3 4 5 6 7 8 9 10 11 12 13
html returned in the JSON body is the iframe embed code you can use
to add this video to your website.
For all the fine details about the options supported, see the official oEmbed spec.
Using a Template Approach
If you want to avoid making the additional request against the oEmbed endpoint,
you can also build an iframe embed code template, and then add in the video's
For this example we'll be using a hashed ID of
The basic iframe embed code looks like this:
So to use this template with the hashed ID
'abcde12345', we insert it in
Because height and width will change based on your video's content, the template approach is probably best when your entire library uses a consistent size.
In this example, we'll request an
First, the media URL we'll request:
Next, we'll add the parameters for our request:
We'll URL-encode this request:
We URL-encoded this request, because we want the parameters
handle passed along to Wistia, not to the oEmbed endpoint.
And now use the oEmbed endpoint:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
html returned in the JSON body is the embed code you would use to
add this video to your website.
In this case we do the following:
First, add a div container to the page with a unique ID attribute. In our standard embeds, we use the video's hashed ID as the unique ID.
1 2 3
Next, include the Wistia library:
Now let's set a few options on the embed code:
1 2 3 4
Let's also include the socialbar in the embed code:
1 2 3 4 5
Given the oEmbed
base URL, your
account URL, and a
media hashed id, we can
use the jQuery
getJSON function to call against the oEmbed endpoint to return
the video data.
Note this function also takes a callback function as a parameter. We'll set up that callback function next.
1 2 3 4 5 6 7
This function will return a JSON data object, and pass it to our callback function, which will parse the JSON and log the thumbnail URL. Let's write that callback function now:
1 2 3
Finally, we'll setup something to call these functions for our
media hashed id:
Working With The Thumbnail
Part of the JSON returned by the oEmbed is the
thumbnail_url. This URL is a
direct link to the thumbnail image asset. If your implementation involves using
the thumbnail image (i.e. building your own 'popover' embeds, displaying your
own play button, etc.) you should use this thumbnail image, which by default
has no Wistia play button overlaid on it.
See our working with Wistia images guide for more info!
Embedding Options and Plugins
Once you have your embed code built, you probably want to tailor the appearance and behavior to your wishes. You may also want to add a plugin like Turnstile or a Call-to-Action.
For a list of available embedding options to be used with the Customize API, check our Embedding Options Documentation.