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 (Amara’s team of expert captioners and translators):

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.

 

 

 Use Amara Embed Code to Display the Amara Toolbar on Your Site

 

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

 

Embed button on video page on Amara:

Image of the Embed button on the Video Info tab below a video.

 

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.


 



 


Advanced Embedding Options

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"

 


Privacy Using the Amara Embedder

If the embedded video is on a private team that has the team visibility set to private, only members of the team can edit the subtitles. In this case, you may wish to hide the Improve These Subtitles link using the code data-hide-improve="true".


If the embedded video is on a private team that has video visibility set to private, only members of the team can view the embedded video. In this case, you may wish to change your team’s video visibility to Public:

A team's video visibility set to "public", instead of "private".

 


Troubleshooting Issues With Your Embed Code

  • If captions are not displaying after embedding, ensure that the data-team= code is set for your team slug, not set to “null”:

data-team="[team-slug]", where [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/

An example of a URL with the correct data-team= code for a video on the Captions Requested team would be:

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

  • Non-functioning embed code can sometimes be 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 instead of the visual editor; if the visual editor is enabled, it is possible for someone to open the post, which will break the embed code.




Thank you for your contributions to support an inclusive and accessible media ecosystem!

If you have any questions or suggestions, please share your feedback!

  • To submit a quick ticket, click No in the Did you find it helpful link below.