Transcript Embeds

What is a Transcript Embed?

In Wistia, it's very common for audio and video files to have a corresponding transcript generated from the content. In fact, Wistia allows you to generate these through the application if you don't have your own.

With a Wistia transcript embed, you can (you guessed it!) embed an interactive transcript on your own website alongside the Wistia player.

Structure of a Transcript Embed Code

Transcript embeds leverage HTML web components, which allow authors to create reusable, shareable components using JavaScript. The result is a custom HTML component (<wistia-transcript>) that looks and acts like regular HTML. Take a look at the embed code below:

<script src="https://fast.wistia.com/assets/external/transcript.js" async></script>
<wistia-transcript media-id="a-media-hashed-id"></wistia-transcript>

The first line is responsible for loading the script that renders and powers the Wistia transcript component. The second line defines where on your page the Wistia transcript should render.

You'll usually want to put the <script> tag in the <head> of your page, if possible. Then, put <wistia-transcript> wherever you need it!

Dependency With The Player

The <wistia-transcript> embed depends on the presence of a Wistia player on the same page, with the same media hashed id. The transcript acts as another means to engage with the content in your video/audio, and is not a standalone component. Without an instance of the player, your transcript will not render.

Transcript Attributes & Properties

Quick Reference

Name	Required?	Description
`media-id`	yes	The id of the media whose transcript should be rendered. This should match the media id used by your player embed on the page.
`accent-color`	no	A hexadecimal color used as the basis for colors in the transcript interface. If omitted, the transcript inherits color from the Wistia player it's attached to.
`player-dom-id`	no	An identifier used to match the transcript with a specific instance of the Wistia player if multiple players with the same media hashed id are on the same page.

`media-id`

Required. The unique ID of a media.

To get the media ID for a video, refer to the URL of the media's page in Wistia. The alphanumeric characters following /medias/ are what you want.

Attribute	Property	Type	Default value	Example values
`media-id`	`mediaId`	`string`	`undefined`	`"abc123"`, `"ns6e2w2xw1"`

Example code:

<wistia-transcript media-id="abc123"></wistia-transcript>

`accent-color`

The hexadecimal color from which accent colors within the transcript are derived. Falls back to the player's color if none is specified.

There's a few things in the transcript that are important to brand with color. First, we highlight the current cue, and the current word in the media, which take some variation of the accent color. Additionally, the auto-scroll toggle takes the accent color as well to denote when auto-scrolling is enabled.

If you need some more in-depth branding, checkout Styling the Transcript Embed.

Attribute	Property	Type	Default value	Example values
`accent-color`	`accentColor`	`string`	`undefined` (will inherit from player)	`"#2949e5"`, `"2949e5"`

Example code:

<wistia-transcript media-id="abc123" accent-color="#2949e5"></wistia-transcript>

`player-dom-id`

An identifier used to match the transcript with a specific instance of the Wistia player.

The main use case for this is when you have multiple players for the same media on your page. The transcript tries to match itself to a player by the media id it is given. However, if there are multiple players with the same media, it will use the first one it finds. This allows you to specify an id on your player, which you can then pass to this property for the transcript to match.

Attribute	Property	Type	Default value	Example values
`player-dom-id`	`playerDomId`	`string`	`undefined`	`"1", "abcd1234"`

Example code:

<wistia-player id="a-unique-player-id" media-id="abc123" />
<wistia-transcript media-id="abc123" player-dom-id="a-unique-player-id"></wistia-transcript>

Styling the Transcript Embed

By default, a Wistia transcript embed inherits the color of the Wistia player it's connected to, so it will automatically match your brand at a basic level. If you want to customize the styles of the transcript further though, you're in luck!

There are a number of internal parts of the <wistia-transcript> that you can style with your own CSS. Since <wistia-transcript> is a web component, you can use the web platform's native ::part() pseudo-element selector to target elements with part attributes inside of <wistia-transcript>. For more information on the ins-and-outs of styling web components, check out the MDN documentation.

Below, we've compiled a list of all the parts we make available in <wistia-transcript> for custom styling.

Quick Reference

Part	Description
`timed-word`	All words within paragraphs
`current-word`	The single current word, given the player's current time
`current-cue`	A group of words that contain the current word, given the player's current time
`chapter`	The outer container of a chapter indicator
`chapter-title`	The title of the chapter, but of course
`chapter-header`	The word "Chapter" (which is automatically translated based on the player's current Closed Captions language selection)
`hover-button`	The buttons at the top-right of the transcript, which appear on hover or when keyboard focus is within the transcript
`paragraph`	A paragraph of text
`switch`	The switch control within the auto-scroll toggle

Style playground

Click around to toggle example custom styles on each part. Note that to see the effect of several of these, you will need to hover or keyboard focus within the transcript.

wistia-transcript::part(timed-word):hover { box-shadow: 0 0 0 2px red; } wistia-transcript::part(current-word) { box-shadow: 0 0 0 2px red; } wistia-transcript::part(current-cue) { box-shadow: 0 0 0 2px red; } wistia-transcript::part(chapter) { box-shadow: 0 0 0 2px red; } wistia-transcript::part(chapter-title) { box-shadow: 0 0 0 2px red; } wistia-transcript::part(chapter-header) { box-shadow: 0 0 0 2px red; } wistia-transcript::part(hover-button) { box-shadow: 0 0 0 2px red; } wistia-transcript::part(paragraph) { box-shadow: 0 0 0 2px red; } wistia-transcript::part(switch) { box-shadow: 0 0 0 2px red; }

Accessibility & Keyboard Navigation

<wistia-transcript> is fully keyboard navigable. Use the Tab key to navigate to the next paragraph or chapter. Press space or enter to begin playback from that point in the transcript.

For a full list of keyboard shortcuts, press ? within the transcript to bring up the keyboard navigation menu.