You can have the Amara toolbar appear on almost any video player on your site by using the Amara embed code.

 

The Amara toolbar has options to enable viewers to access subtitles in any language available on Amara, improve the subtitles, download the subtitles, and more.  See the section Advanced Embedding Options for information about including or hiding features from the Amara toolbar.


An example of the Amara toolbar at the bottom of the video player:

An example of the embedded Amara toolbar below a video.

 

An example of a searchable transcript accessed from the Amara toolbar:

Image of an example of a searchable transcript accessed from the Amara toolbar.

 

In addition to the ability to view subtitles in any language that’s available, your viewers can improve the subtitles, download them, or order captions or subtitles from Amara on Demand:

Image of some options available on the Amara toolbar such as improve the subtitles, download them, or order captions or subtitles from Amara on Demand.

 

 

 

Every video page on Amara has an Embed button that contains the embed code for that video.

 

Embed button on Amara Public Workspace video page and on a Team video page:

Image of the Embed button on the Video Info tab below the video on Amara Public Workspace videos and New style team videos.

 

Click on the Embed button to display the Embed Video popup box that contains the embed code for the video:

Image of the Embed Video popup box. This popup box contains the code that needs to be copied and pasted into the HTML file for your site.

 

Both parts of the code will need to be copied and pasted into different parts of the HTML file for your site, as detailed below.

 

Step 1: copy and paste the following code in the HTML file for your site, preferably closest to the closing body tag:

 

<script type="text/javascript" src="https://amara.org/embedder-iframe"></script>


Example of how the pasted embed code looks in an HTML file:

Image of how the pasted embed code looks in an HTML file.

 

Step 2: Copy and paste the following code inside the body of the HTML file for your site where you want to include the Amara toolbar on your page: 

 

<div class="amara-embed" data-url="http://www.youtube.com/watch?v=aQ-xe-GSjdA" data-team="volunteers"></div>

 

Note: This code is specific to your video and will contain a different URL and team information than the example above.


 

Example of how the pasted embed code looks in an HTML file:

Image of the embed code looks that is specific to your video when pasted into an HTML file.


The video below has been embedded on this page using the Amara embed code. Because it has been embedded, the video can be played directly from this page.

 



 



 

The following are codes that you can add to the Amara embed code which is specific to your video to control what options and features are available for your viewers.

The codes should be inserted before the </div> tag.

For example, if you want to set the initial active subtitle language, your Amara embed code will look like this: 

<div class="amara-embed" data-url="http://www.youtube.com/watch?v=aQ-xe-GSjdA" data-team="volunteers" data-initial-language="en"></div>

Note: the code to set the initial active subtitle language is data-initial-language="[language-code]", where [language-code] is the specific language code, such as "en" for English, “de” for German, etc.

 

OPTION

CODE

Set the initial active subtitle language

data-initial-language="[language-code]" 

Display the subtitles by default

data-show-subtitles-default="true"

Display the searchable transcript by default

data-show-transcript-default="true"

Control the max width of the embedder. Note that the embedder is responsive - it will resize itself to fit inside its container width. The height will always be calculated based on the width and aspect ratio.

data-width="XXpx"

Use Amara video ID instead of the original video URL.  You can find the Amara video ID in the browser address bar on the video page on Amara (shown in bold here):  https://amara.org/en/videos/eSe9MsMdhLnP/info/meet-amara/

data-video-id="[video_id]"

Display the subtitles by default

data-show-subtitles-default="true"

Display the searchable transcript by default

data-show-transcript-default="true"

Hide the Amara logo

data-hide-logo="true" 

Hide Subtitle Me button when the video has no subtitles

data-hide-subtitle-me="true"

Hide Improve These Subtitles link

data-hide-improve="true"

Hide Order Subtitles link

data-hide-order="true"

Hide Download Subtitles link

data-hide-download="true"

Hide Get Embed Code link

data-hide-embed="true"

Hide the fullscreen button

data-hide-embed="fullscreen"

Indicate the video is a team video or an Amara Public Workspace video

Note: For a team video, [team-slug] is the team ID that is found in the team’s URL. For example: "captions-requested" is the [team slug] for the Captions Requested team, which can be found in the team URL: 

https://amara.org/en/teams/captions-requested/

For example: <div class="amara-embed" data-url="http://www.youtube.com/watch?v=tboW11dMeKs" data-team="captions-requested"></div>

For an Amara Public Workspace video, [team-slug] is set to null, for example: <div class="amara-embed" data-url="http://www.youtube.com/watch?v=Rpj0emEGShQ" data-team="null"></div>

data-team="[team-slug]"

 



If the embedded video is on a private team, only members of the team can edit the subtitles.

 

If the embedded video is in the Amara Public Workspace, anyone can edit the subtitles, and these edits will be reflected in the embedder. However, you can roll back any unwanted changes following the instructions in the Edit Subtitles article in the section titled Revert to Previous Subtitle Version. Additionally, you may want to consider using the advanced embed option code to hide the Improve These Subtitles link. 

 

To completely protect the subtitles from unwanted changes - even temporary ones -  take a look at Amara Enterprise Platform team offerings which include features such as privacy, workflows, and more. 




  • Non-functioning embed code is often due to a Content Management System (CMS), such as WordPress, Drupal, Django, etc., not allowing <script> tags, or a WYSIWYG visual editor breaking the embed code.  

  • WordPress.com doesn't allow <script> tags (but self-hosted WordPress sites do). Many self-hosted WordPress sites have a WYSIWYG visual editor enabled for posts, but you'll need to make sure that the plain HTML editor is enabled, and that someone doesn't come in and accidentally open the post with the visual editor, which will break the embed code.