Wistia Chooser

The Wistia Chooser enables people to access their Wistia videos from outside of the Wistia app, and easily embed and share them.

The Wistia Chooser enables people to access their Wistia videos from outside of the Wistia app, and embed and share them with ease. Want to let folks use video within your product? The Chooser's a great choice.


Alert
🚧 The Wistia Chooser is in beta. Please contact beta@wistia.com if you plan on building something with it. We want to learn how you want to use it, and how we can make it great for you. Thanks! 🚧

Demo: Try The Chooser

Glitch
See live examples and create your own on Glitch: Wistia Chooser Demo.

Getting Started

To add a Chooser to a page, include the following code snippet:

<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<div id="wistia_chooser" style="height:400px;width:360px;"></div>
<script>
  var wistiaChooser = new Wistia.Chooser({
    accessToken: ACCESS_TOKEN_GOES_HERE,
    domId: "wistia_chooser"
  });
  wistiaChooser.setup();
</script>

You'll just need to specify an accessToken from your account to get that code ready to go. More options are available too. Check 'em out below.

Options

accessToken (required)

The access token to authenticate access to projects. You can use a permanent token from your account for prototyping, but for production usage we recommend getting an access token via OAuth2.

customAction

By default, a person can decide to do two things with the video they choose: "Copy URL" or "View in Wistia." You can optionally define a customAction to provide a third option with your own custom-defined functionality. For example:

customAction: {
  text: "Do something with the video!",
  callback: myFunction // a function you define, which gets the `media` object as an argument
}

defaultUploadProjectId

You can specify a default project to upload videos into. This is only used if a person begins uploading before clicking into a project. If the person clicks into a project first, the video gets uploaded to that project instead of the default.

If a default project is not specified, the upload button is only visible upon clicking into a project.

domId (required)

The id attribute of the DOM element the Chooser will appear in.

Chooser methods

setup()

After initalizing a Chooser object with all of its options, display it by calling the Chooser's setup() method.

Media methods

getEmbedCode(options)

The media object's getEmbedCode() method gets an embed code for that media with the embed options and embed code type you specify, and returns a promise. When the promise is fulfilled, it provides an embedCode object to your handler.

Alert
The getEmbedCode method does not currently accept those options (embed options or embed code type). That is planned, but not yet implemented.
media.getEmbedCode({ playerColor: "56be8e", embedType: "async"}).then(function(embedCode) {
  console.log(embedCode);
});

Example embedCode object

{
  html: "<script src='//fast.wistia.com/assets/external/E-v1.js' async></script><div class="wistia_embed wistia_async_3zckaidcu1" style="height:540px;width:960px">&nbsp;</div>"
  id: "aa585890-8e2c-0134-e0a1-3c764e10a56f"
  type: "embed_code"
}

getThumbnail(options)

The media object's getThumbnail() method gets a thumbanil for that media with the options you specify, and returns a promise. When the promise is fulfilled, it passes the thumbnail object to your fulfillment handler.

Valid options include:

  • play_button: defaults to whether shown as specified in customize
  • play_button_color: RGB or hex color value, defaults to player color specified in customize
  • width: width of the image, in pixels
  • height: height of the image, in pixels
Note
If you only specify height or width, the other dimension will be calculated based on the aspect ratio of the original thumbnail image.
media.getThumbnail({ width: 300, play_button: true }).then(function(thumbnail) {
  console.log("Preserve natural aspect ratio and set width to 300, with a play button", thumbnail.url);
});

Example thumbnail object

{
  height: 720
  id: "https://embed-ssl.wistia.com/deliveries/791f19b5603b8a5eee0713869d1aac37293205e5.jpg?image_crop_resized=1280x720&image_play_button=true&image_play_button_color=54bbffe0"
  type: "thumbnail"
  url: "https://embed-ssl.wistia.com/deliveries/791f19b5603b8a5eee0713869d1aac37293205e5.jpg?image_crop_resized=1280x720&image_play_button=true&image_play_button_color=54bbffe0"
  width: 1280
}

Example implementations

Embed a video

<div id='wistia-chooser' style="height:400px;width:320px;"></div>
<!-- The div below will be filled in with the chosen video -->
<div id="wistia-video" style="height:360px;width:640px;"></div>
<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<script>
  var chooser = new Wistia.Chooser({
    accessToken: ACCESS_TOKEN_GOES_HERE,
    domId: 'wistia-chooser',
    customAction: {
      text: "Embed this video",
      callback: function(media) {
        media.getEmbedCode().then(function(embedData) {
          document.getElementById('wistia-video').innerHTML = embedData.html;
          document.querySelector('#wistia-video .wistia_embed').style.height = '100%';
          document.querySelector('#wistia-video .wistia_embed').style.width = '100%';
        });
      }
    }
  });
  chooser.setup();
</script>

Show URL for the video in Wistia

<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<div id='wistia-chooser' style="height:400px;width:320px;"></div>
<input id="wistia-video-url" style="width:320px;margin-top:10px;">
<script>
  var chooser = new Wistia.Chooser({
    accessToken: ACCESS_TOKEN_GOES_HERE,
    domId: 'wistia-chooser',
    customAction: {
      text: "Show video URL",
      callback: function(media) {
        document.getElementById('wistia-video-url').value = media.url;
      }
    }
  });
  chooser.setup();
</script>
<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<div id='wistia-chooser' style="height:400px;width:320px;"></div>
<a id="wistia-video-link">
  <img id="wistia-video-thumbnail" style="width:320px;">
</a>
<script>
  var chooser = new Wistia.Chooser({
    accessToken: ACCESS_TOKEN_GOES_HERE,
    domId: 'wistia-chooser',
    customAction: {
      text: "Insert thumbnail link",
      callback: function(media) {
        document.getElementById('wistia-video-link').href = media.url;
        media.getThumbnail({ play_button: true, width: 300 }).then(function(thumbnail) {
          document.getElementById('wistia-video-thumbnail').src = thumbnail.url;
        });
      }
    }
  });
  chooser.setup();
</script>