Wistia Learning Center
Login

Embed Options and Plugins

Learn more about the embed options and plugins available for your embedded videos.

Suggest Edits

Embed options and Plugins are useful when building an embed code or customizing your embeds programmatically.

Embed Options are essentially attributes for the behavior of your video - fullscreenButton, for example, is a boolean that controls whether the fullscreen button is shown on your player or not.

Plugins are additional scripts you can add to your video, giving it new functionality and adding new interfaces. Turnstile, for example, is an email collector you can add to your video by including the plugin.

🛠️

Glitch

Try embed options in this starter app on Glitch, with zero setup!

Using Embed Options

When you add embed options to your embed code using the approach outlined below, it will override any conflicting customizations (i.e. if you set playerColor inline, and if you've already set it in the GUI, your inline attribute will be used).

📝

Note

The Wistia APIs were specifically built for videos in projects. We do not formally support using our APIs for audio files in projects, or audio or video episodes in Channels at this time. For the most reliable experience, we recommend continuing to use these for videos in projects. If you would like to add embed options to Channels head over to the Channel Embed Options guide.

Setting options on Standard and Popover embeds

Options can be set in two ways on Standard embeds and Popover embeds (which are actually just Standard Embeds with a special option). First, the most common method is to add class in the form option=value. Multiple options are separated by spaces. If an option value has spaces, you can percent encode it.

<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_5bbw8l7kl5 videoFoam=true playerColor=ff0000" style="height:360px;position:relative;width:640px"></div>

If you have more complex options or need to generate them on the client side, you can use window._wq to set them with a javascript object literal:

📝

Note

Options defined this way will only take effect if they are pushed onto _wq before the video is embedded.

<script>
window._wq = window._wq || [];
_wq.push({
  id: "5bbw8l7kl5",
  options: {
    videoFoam: true,
    playerColor: "ff0000",
    plugin: {
      "requireEmail-v1": {
        lowerText: "Thanks in advance!"
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_5bbw8l7kl5 style="height:360px;position:relative;width:640px"></div>

You can also target all the videos on a page. If you’d like to use embed options on all videos on your page, you can use the special “_all” matcher:

window._wq = window._wq || [];
_wq.push({
  id: "_all",
  options: {
    videoFoam: true,
    playerColor: "ff0000",
    plugin: {
      "requireEmail-v1": {
        lowerText: "Thanks in advance!"
      }
    }
  }
});

Setting options on iframe embeds

Options can only be set one way with iframe embeds. It is similar to the option=value syntax of Standard embeds, but every option and value must be percent encoded and separated by an &. The first character after the video's hashed ID must be a ?.

<div class="wistia_responsive_padding" style="padding:56.25% 0 0 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?seo=true&videoFoam=true&playerColor=ff0000" title="Video Title " allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" msallowfullscreen width="100%" height="100%"></iframe></div></div>
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>

Setting options using the Customize API

You can update embed options saved within the Wistia app using the API. This way, wherever you embed your video, it will inherit the customizations you've defined. Visit the Customize API documentation to see how.

NOTE: When using the Customize API to update embed options, you don't need to percent encode any option names or values.

Options

List of all Options

autoPlay

If set to true, the video will play as soon as it's ready.

  • autoPlay will not work on iOS and other mobile devices due to restrictions on bandwidth on cellular networks. You can find more information on these restrictions in the Player API Documentation.

  • Videos will autoplay whenever possible, but some browsers (like most mobile browsers and Safari) prevent video autoplay.

  • You can add ?wvideo=hashedid to the end of any URL where a Wistia video is embedded, so that it will automatically start playing when your viewer visits that link. You can test this out in your Wistia account too!

controlsVisibleOnLoad

If set to true, controls like the big play button, playbar, volume, etc. will be visible as soon as the video is embedded. Default is true.

copyLinkAndThumbnailEnabled

If set to false, once your video is embedded on a webpage, the option to "Copy Link and Thumbnail" when you right click on your video will be removed. NOTE: If set to false, you will not be able to create a thumbnail that links to the page where the video is embedded. Default is true.

doNotTrack

By default, data for each viewing session is tracked and reported back to the Wistia servers for display in heatmaps and aggregation graphs. If you do not want to track viewing sessions, set doNotTrack to true.

email

Associate a specific email address with this video's viewing sessions. This is equivalent to running video.email(email) immediately after initialization.

endVideoBehavior

This option determines what happens when the video ends.

Possible values are:

  • default: The video stays on the last frame.
  • reset: The video shows the thumbnail and controls if they are set to be visible on load.
  • loop: The video plays again from the beginning.

fakeFullscreen

Default is false. On mobile, for certain devices (i.e. iOS), we pass the video to the native player. We do this because forcing our player to go fullscreen can cause issues with formatting, which can be a jarring experience for the viewer. This means that customizations which come with our player do not appear. You can get around this by setting this option to true.

An alternative is to set the fullscreenOnRotateToLandscape option to false. However, this will not prevent the viewer from clicking on the fullscreen button if it's available.

fitStrategy

This is used to resize a video when there’s a discrepancy between its aspect ratio and that of its parent container. It has the effect of resizing the video independently of the Wistia player.

Possible values are:

  • contain: The video will resize to fit within the parent container and maintain its aspect ratio. This will create a “letterboxing” effect.
  • cover: The video will maintain its aspect ratio and resize to completely fill its parent container. Anything that doesn’t fit within the container will be cut off.
  • fill: The video will stretch to fill the container.
  • none: The video won’t resize to fit its parent container.

NOTE: This embed option has no effect when using a responsive embed code, since the player already resizes to fit the video’s aspect ratio. In addition, Wistia will only generate fixed size embed codes that match a video’s aspect ratio. Because of that, this option is more useful with a custom implementation rather than with a Wistia-generated embed code.

fullscreenButton

If set to true, the fullscreen button will be available as a video control.

NOTE: iframe embeds must have "allowfullscreen" attributes for this option to be meaningful. If "allowfullscreen" attributes are missing, then the fullscreen button will not appear.

keyMoments

If set to false the key moments feature will be disabled so that Google does not crawl URLs with Wistia query parameters

muted

If set to true, the video will start in a muted state.

If you would like your video to play silently and not show the Click For Sound button, then you can set this option.

playbackRateControl

If set to false, the playback speed controls in the settings menu will be hidden.

playbar

If set to true, the playbar--which includes the playhead, current time, and scrubbing functionality--will be available. If set to false, it is hidden.

playButton

If set to true, the big play button control will appear in the center of the video before play.

playerColor

Changes the base color of the player. Expects a hexadecimal rgb string like "ff0000" (red), "000000" (black), "ffffff" (white), or "0000ff" (blue).

playlistLinks

The playlistLinks option lets you associate specially crafted links on your page with a video, turning them into a playlist. For information about how this
works, check out the Embed Links documentation.

playlistLoop

When set to true and this video has a playlist, it will loop back to the first video and replay it once the last video has finished.

playsinline

When set to false, your videos will play within the native mobile player instead of our own. This can be helpful if, for example, you would prefer that your mobile viewers start the video in fullscreen mode upon pressing play.

playPauseNotifier

By default, pausing a video will display a brief animation of the Pause symbol and resuming the video will display an animation of the Play symbol. Setting this embed option to false will remove those animations.

playSuspendedOffScreen

When a video is set to autoPlay=muted, it will pause playback when the video is out of view. For example, if the video is at the top of a page and you scroll down past it, the video will pause until you scroll back up to see the video again.

To prevent a muted autoplay video from pausing when out of view, you can set this to playSuspendedOffScreen=false.

NOTE: This option does not work for Fallback (iframe) embeds in Internet Explorer 11.

plugin[videoThumbnail][clickToPlayButton]

If you’re using a video thumbnail, setting this option to false will remove the “Click to Play” button on the top right of your video thumbnail.

preload

This sets the video's preload property. Possible values are metadata, auto, none, true, and false.

  • metadata: Only video metadata is preloaded.
  • auto: All data is preloaded.
  • none: No data, other than the bare minimum to render a video player on the page, is preloaded.

The values true and false are synonymous with auto and none, respectively.

qualityControl

If set to false, the video quality selector in the settings menu will be hidden.

qualityMax

Setting a qualityMax allows you to specify the maximum quality the video will play at. Wistia will still run bandwidth checks to test for speed, and play the highest quality version at or below the set maximum. Accepted values: 224, 360, 540, 720, 1080, 3840.

Keep in mind, viewers will still be able to manually select a quality outside set maximum (using the option on the player) unless qualityControl is set to false.

qualityMin

Setting a qualityMin allows you to specify the minimum quality the video will play at. Wistia will still run bandwidth checks to test for speed, and play the highest quality version at or above the set minimum. Accepted values: 224, 360, 540, 720, 1080, 3840.

Keep in mind, viewers will still be able to manually select a quality outside set minimum (using the option on the player) unless qualityControl is set to false.

resumable

The resumable feature causes videos to pick up where the viewer left off next time they load the page where your video is embedded. Possible values for the resumable embed option are true, false, and auto. Defaults to auto. If auto, the resumable feature will only be enabled if the video is 5 minutes or longer, is not autoplay, and is not set to loop at the end. Setting resumable to true will enable resumable regardless of those factors, and false disables resumable no matter what.

seo

If set to true, the video's metadata will be injected into the page's on-page markup. Set it to false if you don't want SEO metadata injection. For more information about how this works, check out the video SEO page.

settingsControl

If set to true, the settings control will be available. This will allow viewers to control the quality and playback speed of the video.

See qualityControl and playbackRateControl if you want control of what is available in the settings control.

silentAutoPlay

This option allows videos to autoplay in a muted state in contexts where normal autoplay is blocked or not supported (e.g. iOS, Safari 11+, Chrome 66+). Possible values are:

  • true: The video will default to autoplaying silently.
  • allow: The video will default to normal autoplay, with silent autoplay as a fallback if needed.
  • false: The video will not autoplay silently.

📝

Note

The silentAutoPlay option will act as an autoPlay preference, and will not have the video autoplay by itself. In order for this option to work, the video will need to be set to play through the autoPlay embed option or the customize section.

Note that, technically, a video is considered to be "autoplaying" if the play() command is not issued within a user-generated event (like a click) or within the "end" event handler (e.g. for the next video in a playlist).

If you need to see when the video enters and exits "silent playback mode," refer to the docs on the "silentplaybackmodechange" event.

smallPlayButton

If set to true, the small play button control will be available.

stillUrl

Overrides the thumbnail image that appears before the video plays. Expects an absolute URL to an image. For best results, the image should match the exact aspect ratio of the video.

time

Set the time at which the video should start. Expects an integer value in seconds or string values like "5m45s". This is equivalent to running video.time(t) immediately after initialization.

thumbnailAltText

Set the Thumbnail Alt Text for your media. Changing the Alt Text via this method will set new Alt Text or override the Alt Text set in the customization menu.

options{
  thumbnailAltText: "text goes here"
}

videoFoam

When set to true, the video will monitor the width of its parent element. When that width changes, the video will match that width and modify its height to maintain the correct aspect ratio.

Setting bounds for videoFoam

You can set maximum or minimum widths and heights that videoFoam will honor.

For example, when setting the videoFoam option using window._wq, you can change this:

{ videoFoam: true }

to this:

{
  videoFoam: {
    minWidth: 400,
    maxWidth: 960
  }
}

or using height instead:

{
  videoFoam: {
    minHeight: 300,
    maxHeight: 450
  }
}

volume

Set the volume of the video. Expects an integer value between 0 and 1. This is equivalent to running video.volume(v) immediately after initialization.

To mute the video on load, set this option to 0.

volumeControl

When set to true, a volume control is available over the video.

NOTE: On mobile devices where we use the native volume controls, this option has no effect.

wmode

When set to transparent, the background behind the video player will be transparent - allowing the page color to show through - instead of black. This applies e.g. if there's an aspect ratio discrepancy between the dimensions of the video and its container; this option is not connected to Alpha Transparency.

Embed Plugins

The following Embed Plugins are available for Wistia videos:

Turnstile

The Turnstile plugin slides an extremely simple form over the video at a time of your choosing. The sizing of the top and bottom text is determined by the height of the video by default.

Turnstile also tries to avoid asking for the viewer's email if it has already been collected. It does this by saving the email in local storage for the specific location.href where it was collected. You can turn off this functionality by setting alwaysShow to true.

📝

Note

The Turnstile plugin requires you to supply both topText and bottomText options. If you want to leave either of those fields blank, just include empty quotes such as bottomText: "",. If you exclude either of these options, the form will not appear on the video.

Turnstile Plugin Example

<script>
window._wq = window._wq || [];
_wq.push({
  id: "5bbw8l7kl5",
  options: {
    plugin: {
      "requireEmail-v1": {
        topText: "Please enter your email below.",
        bottomText: "We may use this email to contact you about the product, but we won't be too pushy.",
        time: 30,
        askName: true
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_5bbw8l7kl5" style="height:360px;position:relative;width:640px"></div>

Turnstile Plugin Options

allowSkip

Determines whether to display a "Skip" button in the lower right for a gate at the beginning or middle. Defaults to false.

alwaysShow

Determines whether to display the Turnstile gate even if the email has already been collected. Defaults to false.

askName

Determines whether to require first and last name in addition to email. Defaults to false.

bottomText

The text displayed below the input field. Usually this is information about what you'll do with the email.

emailDomainVerification

Restrict the Turnstile to exclude certain email domains. You can use the invalidDomains parameter or the validDomains parameter.

<script>
window._wq = window._wq || [];
_wq.push({
  id: "5bbw8l7kl5",
  options: {
    plugin: {
      "requireEmail-v1": {
        topText: "Please enter your email below.",
        bottomText: "We may use this email to contact you about the product, but we won't be too pushy.",
        time: 30,
        askName: true,
        emailExampleText: "Business Email",
        invalidDomains: "competitor.com,heckno.com",
        validDomains: "coolsite.com,heckyeah.com",
      }
    }
  }
});
</script>

emailExampleText

The text that is displayed when the email input field is empty.

firstNameExampleText

The text that is displayed when the first name input field is empty. Only applicable when askName is true.

lastNameExampleText

The text that is displayed when the last name input field is empty. Only applicable when askName is true.

sectionIndex

Only applies to playlists. When a project is converted to a playlist, use sectionIndex to select which project section to gate with a Turnstile. This must be used in conjunction with videoIndex to identify which video in the section has the Turnstile applied. Defaults to 0 (the first project section).

NOTE: Playlists are a deprecated feature, but this embed option will still work when applied to already existing playlists in the wild.

time

The point in the video when Turnstile displays. A value of "before" shows Turnstile before the video starts. "end" shows it at the end. You can also supply a time in seconds (e.g. 130) and it will appear when the viewer reaches that point in the video (or tries to skip past that point).

topText

The text displayed above the input field. Usually a request to enter the email.

videoIndex

Only applies to playlists. When a project is converted to a playlist, use videoIndex to select which video in the playlist to gate with the Turnstile. Can be used in conjunction with sectionIndex to select which video within a project section is gated. Defaults to 0 (the first video in the playlist or playlist section).

NOTE: Playlists are a deprecated feature, but this embed option will still work when applied to already existing playlists in the wild.

Post-Roll CTA

The Post-Roll Call-to-Action plugin adds an interactive screen of your design, which slides into view after the video has finished playing.

Post-Roll CTA Plugin Example

<script>
window._wq = window._wq || [];
_wq.push({
  id: "4d8229898d",
  options: {
    plugin: {
      "postRoll-v1": {
        text: "This clickable message\n will appear after your\n video ends!",
        link: "https://wistia.com"
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_4d8229898d" style="height:360px;position:relative;width:640px"></div>

Post-Roll CTA Plugin Options

autoSize

When true, sets a font-size and line-height for the CTA that scales based on the height of the video. Default is false, in which case the text of the CTA will remain at the same size regardless of the video's height.

backgroundOpacity

A decimal between 0 and 1 to set the overall opacity of the background. Default is 0.91.

image

The image src for the CTA.

link

The destination URL when you click the post-roll.

This parameter can be used with either text or image CTAs. If a raw parameter is given, it will be used instead of text,image, and link.

CTAs will open the link in a new tab by default. However, when you're using a raw parameter with a Fallback iframe embed, be sure to include target="\_blank" as an attribute of any anchor <a> elements. This will ensure that the embed opens the link in a new tab and not within the iframe.

on

Whether to show the post-roll. Default is true. Can be set to false to override CTA options set via the Customize panel in the Wistia app.

raw

The raw HTML for the CTA. Keep in mind that adding HTML here will still require the HTML to be formated in JSON and as a string. If we wanted to use the Post-Roll CTA example from earlier, and combine it with our Multiple Choice CTA example, then the raw format will look like this:

<script>
window._wq = window._wq || [];
_wq.push({
  id: "4d8229898d",
  options: {
    plugin: {
      "postRoll-v1": {
         raw: "<a href=\"#wistia_30q7n48g4f\">Next Up: Make French Toast</a><br/><p>Or you could watch...</p><a href=\"#wistia_342jss6yh5\">Our Wistia Team Intro!</a><br/>"
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_4d8229898d" style="height:360px;position:relative;width:640px"></div>

rewatch

Use this to show a "Rewatch" button in the lower left corner of the video. Defaults to true for text CTAs and false for image or HTML CTAs.

text

The text for the CTA.

time

The point in the video when the CTA displays. A value of before shows the CTA before the video starts, and end shows it at the end. You can also supply a time in seconds (e.g. 130), and it will appear when the viewer reaches that point in the video (or tries to skip past that point).

Scripts and CSS in Post-Rolls

<script>, <style>, and <link rel="stylesheet"> tags are allowed in the raw option, but have some special rules around them for security.

  1. When saved via the Customize API, <style> tags and style attributes will be sanitized to prevent XSS vectors.
  2. <script> and <link rel="stylesheet"> tags will not be executed when your embed is in a wistia.com domain. This includes the video that's visible in your account. However, if you embed the video on a different domain, the scripts will execute in order.
  3. Assuming you are on a non-wistia.com domain, <script>, <style>, and <link rel="stylesheet"> tags will be injected onto the page immediately after your HTML has been rendered to the page.

Annotations

The Annotations plugin displays mid-playback links or plain text notes in the top right corner of the video.

Annotations Plugin Options

links

An array of objects specifying the annotations to display at what times. The options for each annotation object are specified below.

Annotation Options

time

The time at which this annotation appears in the video. Expects a value in seconds. (Required, but ignored if dynamic)

duration

The amount of time this annotation stays visible, in seconds. (Required, but ignored if dynamic)

text

The plain text content of this annotation. HTML is not allowed. (Required)

url

The URL the annotation will link to. If its value is null, "", or undefined, the annotation text will be shown as plain text instead of as a link. (Optional)

Annotations Plugin Example

Here's an example code. This code, when added to an embed, will configure an annotation link to display between 0:03 and 0:08 on the video. Note that this will override any existing annotations set in Customize panel within the Wistia app.

<script>
window._wq = window._wq || [];
_wq.push({
  id: "4d8229898d",
  options: {
    plugin: {
      "midrollLink-v1": {
        links: [
          {
            time: 3,
            duration: 5,
            text: "Click me!",
            url: "http://wistia.com"
          }
        ]
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_4d8229898d" style="height:360px;position:relative;width:640px"></div>

If you'd rather preserve any existing annotations added via Customize and augment those annotations with your own, you can do so with .addLink() or a combination of .getLinks() and .setLinks().

<script>
window._wq = window._wq || [];
_wq.push({
  id: "4d8229898d",
  onHasData: function(video) {
    video.plugin('midrollLink-v1', function(annotation) {
      // add a single annotation like this
      annotation.addLink({
        time: 5,
        duration: 3,
        text: "I'm a dynamic annotation."
      });
      // or add a bunch like this
      annotation.setLinks(annotation.getLinks().concat([
        {
          time: 10,
          duration: 3,
          text: "I'm another dynamic annotation.",
          url: "https://wistia.com"
        }
      ]));
    });
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_4d8229898d" style="height:360px;position:relative;width:640px"></div>

Dynamic Annotations

Your own script can take control of showing and hiding links. In this case, you can register a callback so that when the plugin loads, you can use its methods .showLink() and .hideLink() at will. The .showLink() method accepts an object with the same annotation options as above, but ignores time and duration.

To ensure your dynamic annotations do not conflict with any existing annotations set in the Customize panel within the Wistia app, you must tell the Annotations plugin to ignore them with the {links: false} option. If you don't, both sets of annotations will be visible.

<script>
window._wq = window._wq || [];
_wq.push({
  id: "4d8229898d",
  options: {
    plugin: {
      "midrollLink-v1": {
        links: false
      }
    }
  },
  onHasData: function(video) {
    var myCustomLink = {text: 'Click here!', url: 'https://wistia.com'};
    var isShowingLink = false;

    video.plugin('midrollLink-v1', function(annotation) {
      video.bind('timechange', function(timeInSeconds) {
        if (timeInSeconds > 10 && timeInSeconds < 20) {
          if (!isShowingLink) {
            annotation.showLink(myCustomLink);
            isShowingLink = true;
          }
        }
        else if (isShowingLink) {
          annotation.hideLink();
          isShowingLink = false;
        }
      });
    })
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_4d8229898d" style="height:360px;position:relative;width:640px"></div>

Looping Video Thumbnail

The videoThumbnail plugin allows you to set a looping video thumbnail for your embedded media.

Video Thumbnail Plugin Example

<script>
  window._wq = window._wq || [];
  _wq.push({
    id: "xz77w5ts33",
    options: {
      plugin: {
        videoThumbnail: {
          on: true,
          hashedId: "xz77w5ts33",
          trimStart: 13,
          trimEnd: 18,
          async: false,
        }
      }
    }
  });
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div
  class="wistia_embed wistia_async_xz77w5ts33"
  style="height:360px;position:relative;width:640px"
></div>

Looping Video Thumbnail Options

trimStart

Use this to identify the start of the section of your video you’d like to use as a looping thumbnail. Expects a value in seconds.

trimEnd

Use this to set the end of the section of your video you’d like to use for your animated thumbnail. Expects a value in seconds.

Share

Add a Share control to your video player so viewers can share to various social media platforms.

Share Plugin Example

<script>
window._wq = window._wq || [];
_wq.push({
  id: "5bbw8l7kl5",
  options: {
    plugin: {
      share: {
        channels: "facebook-twitter",
        tweetText: "Check out this awesome video called {video_name}!",
        overrideUrl: "false"
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_5bbw8l7kl5" style="height:360px;position:relative;width:640px"></div>

Share Options

channels

Use this to set the list of options you want to show up in the Share menu. The format is a dash-separated string. Here is an example with all of the available options:

"facebook-googlePlus-twitter-email-embed-download-linkedIn"

pageTitle

Determines the title to use when sharing. This title will be displayed wherever possible.

overrideUrl

A true value here will use the pageUrl value as the page to share. The default value is false, which will use the page where the video is embedded.

pageUrl

If overrideUrl is true, this URL is used as the page which is shared.

downloadType

There are three choices for file types if you choose to allow viewers to download from the share menu: sd_mp4, hd_mp4, or original. Only one option is possible.

tweetText

You can use this to compose the tweet text for Twitter shares. Wherever {video_name} is used, it will substitute in the name of the video (as defined on the Wistia media page).

The {page_title} option will substitute in the title of the page the video is embedded on.

Chapters

Add a control to your player to allow users to view chapters on your video. Chapters also adds clickable points on the play bar.

Chaptering Example

<script>
  window._wq = window._wq || [];
  _wq.push({
    id: "5bbw8l7kl5",
    options: {
      plugin: {
        chapters: {
          on: true,
          chapterList: [
            { title: "Chapter 1", time: "5.0" },
            { title: "Chapter 2", time: "20.0" }
          ]
        }
      }
    }
  });
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_5bbw8l7kl5" style="height:360px;position:relative;width:640px"></div>

Chaptering Options

on

This is a true or false value to turn chapters on or off.

chapterList

This is an array of hashes that specify your chapter titles and the times (in seconds) they should display.

Captions

This plugin displays closed captions for your video.

📝

Note

In order to use the Captions plugin, you'll first need to upload a captions file to your video. You can either do this from within the Wistia app or by using our Captions API.

Captions Plugin Example

<script>
window._wq = window._wq || [];
_wq.push({
  id: "qpxihhb76m",
  options: {
    plugin: {
      "captions-v1": {
        onByDefault: true,
        language: 'kor' // default to Korean captions
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_qpxihhb76m" style="height:360px;position:relative;width:640px"></div>

Captions Plugin Options

onByDefault

This determines whether captions will display automatically for this video when it loads. If this is set to true, the captions will display automatically when the viewer starts playing the video. If this is set to false, the viewer will need to click the CC button in the player to turn on captions.

The default for this option is false.

language

Use this to set the default caption language. This only takes effect if onByDefault is set to true.

This is a 3 character language code specified by ISO-639-2. So if you set language to kor and your video has Korean captions, the Korean captions will be displayed.

Without language specified, the player will default to the language of the viewer as set by their browser (we look at their HTTP_ACCEPT_LANGUAGE header).

plugin[captions-v1][subtitlesScale]

You can use a multiplier to scale the size of your captions if you'd like them to be bigger or smaller than our default. For example, set the option to 1.2 (plugin[captions-v1][subtitlesScale]=1.2) to make your captions 1.2x the size of the original captions. NOTE: The scaling value is a multiplier on top of our existing scaling, so the font still gets bigger and smaller with the video, but its final size is multiplied by that option.

transcript

This option can be used to disable Interactive Captions. Default value is true, and setting the option to false will turn off Interactive Captions.

Using Multiple Plugins

If you'd like to use more than one plugin, here is an example of what that code would look like with the Post-Roll CTA and Annotations Plugins.

<script>
window._wq = window._wq || [];
_wq.push({
  id: "4d8229898d",
  options: {
    plugin: {
      "postRoll-v1": {
        text: "This clickable message\n will appear after your\n video ends!",
        link: "https://wistia.com"
      },
      "midrollLink-v1": {
        links: [
          {
            time: 3,
            duration: 5,
            text: "Click me!",
            url: "http://wistia.com"
          }
        ]
      }
    }
  }
});
</script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_4d8229898d" style="height:360px;position:relative;width:640px"></div>

Updated 2 days ago