Wistia: Embed an Interactive Transcript with a Wistia Player on Your Webpage

Content Publishing must be enabled in your 3Play Media account.
See more information on enabling content publishing in your 3Play project.

Follow the steps below to get started.

Click here to see key steps and modifications for creating an interactive plugin with a Wistia player. 

Step 1- Log into your Wistia account

Wistia login page 

Step 2- Select your video

Once you log in you will be directed to the My Projects page. Select the project that your video belongs to, then click on the video you want to create an interactive transcript for.

Select your Wistia video

Step 3- Click on Embed

Click Embed, which is located in two places; underneath your video and to the right of your video under Media Actions.

Wistia embed code

Step 4- Copy the iframe embed code

After clicking Embed, by default, the iframe embed code is displayed. Select your video dimensions, then click Copy to save this code to your clipboard. For embed type, make sure Inline is selected.

wistia_copy_embed.jpg

 

Step 5- Paste the iframe embed code

Open your HTML editor and paste the iframe embed code into the document. It will look similar to the example below.

<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/xmjmj4ujtn?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

Step 6- Adjust the video embed code

After pasting the code in the HTML document add:

id="wistia_embed_id"

to the end of the iframe embed code.  

It now should look similar to this:

<iframe src="http://fast.wistia.com/embed/iframe/62ac859063?videoWidth=640&videoHeight=360&controlsVisibleOnLoad=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360" id="wistia_embed_id"></iframe> 

Step 7- Log into 3Play Media

Transcription Closed Captioning 3Play Media account Login

Step 8- Create a Plugin Template

Navigate to Settings > Plugin Templates and create a new interactive transcript plugin template. 
See more information on how to create a Plugin Template

For Player select Wistia (iFrame Mode) from the drop down menu.
In the Player ID field enter wistia_embed_id

Select Skin, set dimensions (Height and Width) and select from the available plugin Settings.Enter Brightcove object ID for interactive transcript plugin

After designing the plugin template click Save My Plugin.

PRO TIP: If you want the video player and the interactive transcript plugin to match in width, change the plugin template's width to match the width of the Wistia player! If you change the width of the Wistia player to match the interactive transcript plugin, the aspect ratio of your video will likely be distorted

Step 9- Select the file

Navigate back to the My Files page and click on the file associated with your Wistia video.

Select 3Play Media file

Step 9- Click Publish Plugin

Click Publish Plugin located above your transcript.

Publish interactive transcript with Wistia video

Click Select Your Plugin and from the drop-down menu that appears, select the corresponding plugin template.

Select interactive plugin template for Wistia

Click the box next to Include transcript in noscript tag for SEO, if you would like this to improve SEO.

Step 10- Copy the 3Play Media plugin embed code

Copy plugin embed code


Step 11- Paste the plugin embed code into your HTML

Go back to your HTML code. Paste the 3Play plugin embed code below the video embed code in the <body> of your HTML.

Below is an example of what the interactive transcript plugin embed code should look like.

 

Formatting tip:  If you want the video player and the interactive transcript plugin to match in width, change the interactive transcript plugin's width to match the width of the Wistia player! If you change the width of the Wistia player to match the interactive transcript plugin, the aspect ratio of your video will likely be distorted. 

Step 12- Add this JavaScript file

After the 3Play Media embed code add:

<script src="//fast.wistia.com/static/iframe-api-v1.js"></script>

 

After adding this JavaScript file to your HTML document it should look similar to the example below:

<iframe src="http://fast.wistia.com/embed/iframe/534cef38b4?controlsVisibleOnLoad=true&version=v1&videoHeight=360&videoWidth=640&volumeControl=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360" id="wistia_embed_id"></iframe>

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=transcript&settings=width:398,height:240,skin:frost,can_collapse:true,collapse_onload:true,can_print:true,scan_view:true&player_type=wistia_iframe&player_id=wistia_embed_id" type="text/javascript"></script>

<script src="//fast.wistia.com/static/iframe-api-v1.js"></script>

Step 13- Publish your Wistia player with the interactive transcript

Save the HTML document and publish it! Enjoy!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk