Vimeo: Embed the Captions Plugin 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 captions plugin 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 the captions plugin for. Then click on the Share icon, located on the top, right-hand corner of the video.

Vimeo share icon

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

Vimeo iframe embed code

 

Step 4- Add this JavaScript file to <head>

Open your HTML editor and add the following line of code to the <head> section of your HTML document:

<script type="text/javascript" src="http://p3.3playmedia.com/javascripts/vendor/froogaloop2.min.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.  It will look similar to this:

<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

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 Type.  Two styling options are available.  Width can also be adjusted.

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 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.

Click a File

 

 

Step 10- Click Publish

Click the Publish button located above your list of files.

Click Publish button

 

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 Template

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 Captions Plugin Code

 

Step 13- Paste the Captions 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>
<script type="text/javascript" src="http://p3.3playmedia.com/javascripts/vendor/froogaloop2.min.js"></script>

</head>

<body>
<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>

  

Your HTML should now look similar to this:

<html>
<head>
<script type="text/javascript" src="http://p3.3playmedia.com/javascripts/vendor/froogaloop2.min.js"></script>

</head>

<body>
<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>

<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=vimeo_iframe&player_id=moog" type="text/javascript"></script>

   </body>
</html>

 

 

Step 16- Publish your Vimeo 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