Wistia: Embed an Audio Description Plugin 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 translation account 3Play Media login

Step 7- Create a Plugin Template

Navigate to Settings > Plugin Templates and click +Create Plugin TemplateSee more information on how to create a Plugin Templates.

> For Player select Wistia from the drop down menu. If you're using the fallback, select Wistia iFrame version.
> For Plugin Type choose Audio Description 
> For Player ID choose a player ID that matches your video id.
Find out how to identify your video ID here.


After designing the plugin template click Save My Plugin.

Step 8- Select file

From the My Files page in your 3Play Media project click on the name of the file associated with your Wistia video.

Select transcript that correlates to Brigthcove video

Step 9- Click Publish Plugin

Click the Publish Plugin button located above your list of files.

Click Publish Plugin

Step 10- Select a Plugin Template

Click Select Your Plugin and from the drop down menu that appears select the plugin template created in step 8.

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

Step 11- Copy the Plugin embed code

After selecting a plugin template copy the plugin embed code that appears within the Publish Plugin pop-up menu.

interactive transcript embed code for Kaltura

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

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

Step 13- Publish your Wistia player with the Audio Description plugin

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