Wistia Chooser
The Wistia Chooser enables people to access their Wistia videos from outside of the Wistia app, and easily embed and share them.
Want to let folks use video within your product? The Chooser’s a great choice.
Demo: Try The Chooser
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.
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"> </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 customizeplay_button_color
: RGB or hex color value, defaults to player color specified in customizewidth
: width of the image, in pixelsheight
: height of the image, in pixels
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>