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

Content Publishing must first 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 the Vimeo iframe embed code.

Note: The Vimeo iframe embed code works with the 3Play Media interactive transcript not only on HTML webpages, but also with iPads and Flash! 

 

Step 1- Log into your Vimeo account

Vimeo login

 

Step 2- Navigate to the Videos page

On the top of the screen, click on the Videos tab.

Vimeo videos tab

 

Step 3- Copy the video embed code

Click on the video you want to create an interactive transcript for. Then click on the Share icon, located on the top, right-hand corner of the video.

New_vimeo_share_button.jpg

Under Embed, copy the iframe embed code to your clipboard.

Vimeo iframe embed code

 

Step 4- Add this JavaScript file 

To use the new Vimeo API, you need to have this on the page somewhere:

<script src="https://player.vimeo.com/api/player.js"></script>

 

Step 5- Paste the video embed code

In your HTML editor paste the video embed code into the <body> of your HTML document.  
You will need to add http: before // in the Vimeo embed code if it isn't present when you copy the embed code.
Once added, It will look similar to the example below:

<iframe src="http://player.vimeo.com/video/40689637" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

 

Step 6- Adjust the video embed code

- Modify the iframe embed code by adding id="moog" after <iframe.

- After video/40689637(this number will be unique to your video), add ?api=1&player_id=moog so the plugin knows how to access the video player.

- Notice that the quotation marks moved from after video/40689637 to after moog

The embed code from step 5 should now look similar to this:

<iframe id="moog" src="http://player.vimeo.com/video/40689637?api=1&player_id=moog" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

 Keep this HTML document open.

Step 7- Log into your 3Play Media account

transcription closed captioning translation account 3Play Media 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 Vimeo iFrame from the drop down menu.
> In the Player ID field enter moog

Select Plugin Template, to choose the stye of the interactive transcript.  Dimensions (Height and Width) can also be adjusted.

Enter Vimeo video 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 Vimeo player! If you change the width of the Vimeo player to match the interactive transcript plugin, the aspect ratio of your video will likely be distorted

Step 9- Select file

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

Select transcript that correlates to Brigthcove video

Step 10- Click Publish Plugin

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

Click Publish Button

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

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 Plugin Template from drop down menu

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.

interactive transcript embed code for Vimeo

Step 13- Paste the plugin embed code

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

<html>
<head>

</head>

<body>

<script src=“https://player.vimeo.com/api/player.js“></script>


<iframe id="moog" src="http://player.vimeo.com/video/40689637?api=1&player_id=moog" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<!-- Start of 3Play Media Plugin Embed Code -->

<script type="text/javascript" src="//static.3playmedia.com/p/projects/000/files/0000/plugins/00000.js"></script>

<!-- End of 3Play Media Plugin Embed Code --> 

   </body>
</html>

Step 14- Publish the HTML page 

Save the HTML page and publish the Vimeo player with the interactive transcript!

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk