Wistia: Embed the Captions 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 account.

Follow the steps below to get started.

Alternatively, we offer a stripped-down version of this article that highlights the 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 the captions plugin 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.

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

 

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 your 3Play Media account

3Play Media login

Step 8- Create a Plugin Template

Navigate to Settings > Plugin Templates >  and create a new Captions 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.

This will be wistia_embed_id that was added to the Wistia embed code in Step 6.

 

Select Skin, set dimensions (Height and Width) and select from the available plugin Settings

Select your 3Play Media file

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.

See more information on the Captions Plugin Settings.

Step 9- Select file

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

Click Publish Plugin button

Step 10- Click Publish

Click the Publish button located above your list of files.

CLick Publish

Step 11- Select a Plugin Template

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

Select Captions Plugin

Step 12- Copy the Plugin embed code

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

Copy Interactive Transcript Plugin Code

 

Step 15- Paste the captions 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 captions plugin embed code should look like.   

Formatting tip:  If you aren't using the OVERLAY function and want the video player and the captions plugin to match in width, change the captions plugin's width to match the width of the Wistia player! If you change the width of the Wistia player to match the captions plugin, the aspect ratio of your video will likely be distorted. 

 

Step 16- 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=captions&settings=width:398,skin:dark,overlay:true,minimize_onload:true,searchbar: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 17- Publish your Wistia player with the captions 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