Add Subtitles to a Vimeo Video

This guide details how to use your translated SRT files with an embedded Vimeo video on your website, changing the language based on the currently selected language.

To get started with Localize For Subtitles, check out our Quickstart for Subtitles doc.

Add the SRT Files

After you've created your source language SRT file and translated it using your Localize dashboard you'll be ready to use it in your Vimeo video.

To add them to a Vimeo video:

1. Log in to your Vimeo account.
2. Navigate to your video.
3. Select Advanced Settings under Settings.
4. Select Subtitles in the Distribution area.
5. Click the + to add a new SRT file.
6. Select the Language from the drop-down.
7. Select Captions and subtitles from the Type drop-down.
8. Select Choose File and select the appropriate SRT file.
9. After the file uploads you can activate the language by clicking on the toggle button.

This will add the CC icon to the control bar of the video, allowing your end-users to select a language.

Automatically Changing Languages in your Videos

To automate the process of switching subtitles in your videos based on the currently selected language, you'll need to modify the URL that's used to display the video and add the texttrack query parameter.

The following sample code assumes that you are using the embed method to add your Vimeo video to your web page. This method adds the video player in an iframe, which we can target with our code.

Be sure to add this code block BEFORE your Localize.initialize() call. Note that this code assumes that there is only 1 video on the current web page.

/* The following code adds the "texttrack" parameter to the query string
 * which sets the language for the subtitles to the currently selected language.
 * It turns subtitles off when in the source language.
 * 
 * This code assumes that you have added the unique Vimeo video ID as the "id" attribute in the iframe tag.
 * Replace all instances of YOUR_VIDEO_ID with the actual ID.
 */
Localize.on("setLanguage", function(data) {
  var lang = Localize.getLanguage(); 
  var srcLang = Localize.getSourceLanguage();
  var videoIframe = document.getElementById("YOUR_VIDEO_ID");

  if (videoIframe) {
    var src = videoIframe.getAttribute("src");

    // We don't want to display subtitles in the source language.
    // Remove this "if" block if you want to display subtitles in the source language.
    if (lang == srcLang) {
      lang = "false";
    }

    if (src.indexOf("texttrack") != -1) {
      src = src.split("texttrack=")[0] + "texttrack=" + lang;
    } else {
      if (src.indexOf("?") != -1) {
        src = src + "&texttrack=" + lang; 
      } else {
        src = src + "?texttrack=" + lang;
      }          
    }
    videoIframe.setAttribute("src", src);
  }
});

This is what the embed iframe code looks like before the code above runs and adds the required query string parameter. You will need to add the id="YOUR_VIDEO_ID" attribute to the <iframe> tag in the embed code so that we can target that video with the code above.

<iframe id="YOUR_VIDEO_ID" class="video-frame" src="https://player.vimeo.com/video/YOUR_VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>