Wistia

to the tippy ↑

Construct a Wistia Embed Code

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 you're new to web development, we recommend taking a lesson before you hit our slopes. Try a class from Frontend Masters or Skillshare!

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 two (and a half) embed code types you can use with Wistia are:

  • async - in the Wistia app we call this the "Standard" embed. If you want to use the Player API to interact with your video, use this embed type.
  • iframe - in the Wistia app we call this the "Fallback" embed. It's super simple, supported almost everywhere, and easy to build.
  • popover - our async embed, but with more pop.

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.

The Endpoint

Our oEmbed endpoint is: http://fast.wistia.net/oembed

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. Though, we recommend going the embed links route if you're hoping to create a playlist.

Examples

  • single video - http://fast.wistia.net/embed/iframe/26sk4lmiix
  • playlist - http://fast.wistia.net/embed/playlists/btv9vulenu

Public Media URLs

Public Media URLs are the address to a video in your account.

  • example - https://support.wistia.com/medias/26sk4lmiix

The Regex

If you're looking to automatically detect Wistia URLs and run them against our endpoint, we recommend using this regular expression:

/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/.*/

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:

/https?:\/\/(.+)?(wistia\.com|wi\.st)\/.*/

oEmbed Parameters

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:

Name Type Description
callback string Only applicable to JSON requests. When specified, json is wrapped in a javascript function given by the callback param. This is to facilitate JSONP requests.
embedType string Only applicable to videos and playlists. Accepts async, iframe, async_popover, playlist_iframe, playlist_api, playlist_popover, 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.
handle string Only applicable to async, and playlist_api embed types. Sets the javascript handle. Default is wistiaEmbed for medias and wistiaPlaylist for playlists.

You can also get a popover embed code by using the async embedType, and adding popover=true to the URL. Check out our tutorial for a full break down.

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.

Note

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.

Troubleshooting

  1. If an invalid URL (one that doesn't match our regular expression above) is given, the endpoint will return 404 Not Found.
  2. If an unparseable URL is given in the URL param, the endpoint will return 404 Not Found.
  3. If a media is found but has no available embed code, the endpoint will return 501 Not Implemented. Only videos are embeddable.
  4. If a playlist is found but has no videos, the endpoint will return 501 Not Implemented.

Standard (async) Embed Tutorial

Using the oEmbed

Here is how we can get the embed code and some information for a video at https://support.wistia.com/medias/26sk4lmiix in JSON format:

Quick note—we have yet to update the oEmbed return to automatically return the Standard (async) embed code type. Currently, this is Wistia's recommended embed type. To call the Standard embed:

curl "http://fast.wistia.net/oembed?url=https%3A%2F%2Fsupport.wistia.com%2Fmedias%2F26sk4lmiix&embedType=async"

Which returns:

return.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "version":"1.0",
  "type":"video",
  "html":"<script charset=\"ISO-8859-1\" src=\"//fast.wistia.com/assets/external/E-v1.js\" async></script><div class=\"wistia_embed wistia_async_26sk4lmiix\" style=\"height:540px;width:960px\">&nbsp;</div>",
  "width":960,
  "height":540,
  "provider_name":"Wistia, Inc.",
  "provider_url":"https://wistia.com",
  "title":"Nice.",
  "thumbnail_url":"https://embed-ssl.wistia.com/deliveries/56cacb9a5d6ea04b1f29defaf4b55d1ec979e1b0.jpg?image_crop_resized=960x540",
  "thumbnail_width":960,
  "thumbnail_height":540,
  "duration":44.457
}

The html returned in the JSON body is the Standard 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 (Standard)

If you want to avoid making the additional request against the oEmbed endpoint, you can also build an Standard embed code template, and then add in the video's hashed ID.

For this example we'll be using a hashed ID of 'abcde12345'.

The basic Standard embed code looks like this:

building_an_iframe_embed_code.html
1
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_embed wistia_async_<media-hashed-id>" style="height:366px;width:600px">&nbsp;</div>

So to use this template with the hashed ID 'abcde12345', we insert it in place of <media-hashed-id>:

building_an_iframe_embed_code.html
1
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_embed wistia_async_abcde12345" style="height:366px;width:600px">&nbsp;</div>

Note

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.

If you'd like to use a responsive template:

building_an_iframe_embed_code.html
1
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 28px 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_abcde12345 videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div>

Popover Embed Tutorial

To grab a popover oEmbed, you can use the embedType=async_popover, or add &popover=true to the request:

  curl "http://fast.wistia.net/oembed?url=https%3A%2F%2Fsupport.wistia.com%2Fmedias%2F26sk4lmiix&embedType=async&popover=true"

  curl "http://fast.wistia.net/oembed?url=https%3A%2F%2Fsupport.wistia.com%2Fmedias%2F26sk4lmiix&embedType=async_popover"

Both options return:

return.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "version":"1.0",
  "type":"video",
  "html":"<script charset=\"ISO-8859-1\" src=\"//fast.wistia.com/assets/external/E-v1.js\" async></script><span class=\"wistia_embed wistia_async_26sk4lmiix popover=true\" style=\"display:inline-block;height:100px;width:150px\">&nbsp;</span>",
  "width":960,
  "height":540,
  "provider_name":"Wistia, Inc.",
  "provider_url":"https://wistia.com",
  "title":"Nice.",
  "thumbnail_url":"https://embed-ssl.wistia.com/deliveries/56cacb9a5d6ea04b1f29defaf4b55d1ec979e1b0.jpg?image_crop_resized=960x540",
  "thumbnail_width":960,
  "thumbnail_height":540,
  "duration":44.457
}

For more fun embed options, check out the full list of embed options.

Fallback (iframe) Embed Tutorial

Using the oEmbed

And finally, here's a quick tutorial for calling the iframe (Fallback) embed. You may also call the iframe embed code type:

  curl "http://fast.wistia.net/oembed?url=https%3A%2F%2Fsupport.wistia.com%2Fmedias%2F26sk4lmiix"

This returns:

return.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "version":"1.0",
  "type":"video","
  html":"<iframe src=\"//fast.wistia.net/embed/iframe/26sk4lmiix\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" class=\"wistia_embed\" name=\"wistia_embed\" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=\"960\" height=\"540\"></iframe>\n<script src=\"//fast.wistia.net/assets/external/E-v1.js\" async></script>",
  "width":960,
  "height":540,
  "provider_name":"Wistia, Inc.",
  "provider_url":"https://wistia.com",
  "title":"Nice.",
  "thumbnail_url":"https://embed-ssl.wistia.com/deliveries/56cacb9a5d6ea04b1f29defaf4b55d1ec979e1b0.jpg?image_crop_resized=960x540",
  "thumbnail_width":960,
  "thumbnail_height":540,
  "duration":44.457
}

Note the html returned in the JSON body is the iframe embed code you can use to add this video to your website.

Using a Template Approach (Fallback)

Just like the Standard embed, you can build an iframe embed code template, and swap out the video's hashed ID.

Again, for this example we'll be using a hashed ID of 'abcde12345'.

The basic iframe embed code looks like this:

building_an_iframe_embed_code.html
1
2
<iframe src="//fast.wistia.net/embed/iframe/<media-hashed-id>" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="600" height="366"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

So to use this template with the hashed ID 'abcde12345', we insert it in place of <media-hashed-id>:

building_an_iframe_embed_code.html
1
2
<iframe src="//fast.wistia.net/embed/iframe/abcde12345" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="600" height="366"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

Note

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.

Just like the Standard embed, the iframe embed can be responsive. Here's the template:

building_an_iframe_embed_code.html
1
2
<div class="wistia_responsive_padding" style="padding:56.25% 0 28px 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe src="//fast.wistia.net/embed/iframe/abcde12345?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

Using JSONP

JSONP is a javascript technique used to get information from a server that is not the same origin as your current domain. This means they can avoid cross-domain security issues.

In this example, we'll write some javascript to pull data for our video against the oEmbed endpoint, utilizing JSONP. Then, we'll manipulate the data returned to embed the thumbnail image.

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.

playlist_api.js
1
2
3
4
5
6
7
var baseUrl = "http://fast.wistia.com/oembed/?url=";
var accountUrl = encodeURIComponent("http://home.wistia.com/medias/");
var mediaHashedId = "01a1d9f97c";

function getThumbnailUrl(hashedId, callback) {
  $.getJSON(baseUrl + accountUrl + hashedId + "&format=json&callback=?", callback);
}

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:

playlist_api.js
1
2
3
function parseJSON(json) {
  console.log(json.thumbnail_url);
};

Finally, we'll setup something to call these functions for our media hashed id:

getThumbnailUrl(mediaHashedId, parseJSON);

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.