Add Subtitles to a YouTube Video

This guide details how to use your translated SRT files with an embedded YouTube 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 YouTube video.

To add them to a YouTube video:

Log in to your YouTube account.
Navigate to your video.
Select Subtitles from the left navbar.
Select Add Language to add a new SRT file.
Select the Language from the drop-down.
In the Subtitles column select Add.
Select Upload File and select the appropriate SRT file.
Select With timing for the subtitle file type the click Continue.
Select the SRT file to upload for that language.
When ready, select Publish to publish your changes.
While adding your Subtitles files for each language, you may also want to translate the title and description for the video.

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 cc_lang_pref query parameter.

The following sample code assumes that you are using the embed method to add your YouTube 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 embedded video on the current web page.

/* The following code adds the "cc_lang_pref" 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 YouTube 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');
  var showCC;

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

    // We don't want to display subtitles in the source language.
    // Always set showCC to 1 if you want to display subtitles in the source language.
    if (lang == srcLang) {
      showCC = 3;
    } else {
      showCC = 1;
    }

    // Set the language to use for the subtitles.
    if (src.indexOf("cc_lang_pref") != -1) {
      src = src.split("cc_lang_pref=")[0] + "cc_lang_pref=" + lang;
    } else {
      if (src.indexOf("?") != -1) {
        src = src + "&cc_lang_pref=" + lang; 
      } else {
        src = src + "?cc_lang_pref=" + lang;
      }          
    }

    // Add the "cc_load_policy=??" to the query string to turn on/off subtitles.
    if (src.indexOf("cc_load_policy") != -1) {
      src = src.split("cc_load_policy=")[0] + "cc_load_policy=" + showCC;
    } else {
      if (src.indexOf("?") != -1) {
        src = src + "&cc_load_policy=" + showCC; 
      } else {
        src = src + "?cc_load_policy=" + showCC;
      }          
    }

    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" width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>