To embed a video from Amara:

Step 1: paste this in your document somewhere (closest to the closing body tag is preferable):


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


Step 2: paste this inside your HTML body where you want to include the videos, with the video URL, height, and width of your choosing:


<div class="amara-embed" data-width="854px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4" data-team="null">
</div>

You can set the following options:


  • Indicate the team that is subtitling the video as data-team="[team-slug]", where team-slug is the team ID used in its URL (example: "captions-requested" in https://amara.org/en/teams/captions-requested/). If data-team is set to null, the embedder will look for a public (no team) video with the given video URL
  • Use Amara video ID instead of the video URL by adding data-video-id
  • Set the initial active subtitle language by adding data-initial-language="[language-code]" in the previous tag, where language is the language code, such as "en" for English.
  • Display the subtitles by default by adding data-show-subtitles-default="true" in the previous tag.
  • Display the transcript by default by adding data-show-transcript-default="true" in the previous tag.
  • Control the max width of the embedder by adding data-width="XXpx" in the previous tag. 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.
  • Hide the menu item to order subtitles by adding data-hide-order="true" in the previous tag.
  • Hide the Amara logo by adding data-hide-logo="true" in the previous tag.
  • Hide Subtitle Me button when the video has no subtitles by adding data-hide-subtitle-me="true" in the previous tag.
  • Hide Improve These Subtitles link by adding data-hide-improve="true" in the previous tag.
  • Hide Order Subtitles link by adding data-hide-order="true" in the previous tag.
  • Hide Download Subtitles link by adding data-hide-download="true" in the previous tag.
  • Hide Get Embed Code link by adding data-hide-embed="true" in the previous tag.
  • Hide the fullscreen button by adding data-hide-embed="fullscreen" in the previous tag.

The subtitles and transcript will display as they do on the Amara video pages and in the Amara embedder example.