Selecting subtitles in Vimeo using JavaScript

Selecting subtitles in Vimeo using JavaScript

Posted on

At SponsorMatch we deploy an Angular Universal website & application that is shown in different languages. Currently we support Dutch (nl) and English (en). On the homepage we use a simple introduction video / explainimation that is hosted on Vimeo to show how the product works. This animation video is made in English but for the Dutch-speaking market we provided Dutch subtitles.


It seems that it's not possible to set the default selected subtitle using the Vimeo iframe embed solution. It's probably possible but anyway, I couldn't find any information on Google or on the Vimeo documentation. There are even some questions on StackOverflow that remained unanswered for years:


There are several solutions possible and one is moving completely to the JavaScript API Vimeo provides. More information can be found here:

The second solution I used was combining the iframe embed solution with the JS API. Basically we just use the iframe that was used for embedding as parameter in the Player constructor:

Using it in Angular

Using it in Angular is fairly easy.. We need to install the @vimeo/player package using yarn or npm:

npm i -s @vimeo/player

Next we can import the Player directly and by using the enableTextTrack function we can easily set the language. As developers / implementors I believe we should be responsible in some way for knowing which languages are available to use. Meaning: which subtitles / texttracks are implemented on the embedded video.


import Player from '@vimeo/player';
const player = new Player(document.getElementById('intro_explanimation'));

player.enableTextTrack(this.language, 'subtitles').then(function (track) {
    // track contains language, kind and label
}).catch(function (error) {
    // error holds what happened in detail

Please take a look at the full example below. The end result is implemented on the homepage of SponsorMatch.

Further reading

  1. Vimeo - Developer API
  2. Player.js - Interact with and control an embedded Vimeo Player


  1. Problem
  2. Solution
  3. Using it in Angular
  4. Further reading

By reading this article I hope you can find a solution for your problem. If it still seems a little bit unclear, you can hire me for helping you solve your specific problem or use case. Sometimes even just a quick code review or second opinion can make a great difference.