Wistia Learning Center
Login

Wistia Chooser

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

Suggest Edits

Want to let folks use video within your product? The Chooser's a great choice.

🚫

Alert

🚧 The Wistia Chooser is in beta. Please contact [email protected] 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.

📝

Note

The Wistia Chooser is not compatible with medias in Channels. If you'd like to use the Wistia Chooser, make sure your medias are in Projects!

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.

uploadsDisabled

You can remove the upload button by setting uploadsDisabled to true .

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>

Insert a thumbnail image link

<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>

Updated 5 months ago