DEV Community


Selecting subtitles in Vimeo using JavaScript

samvloeberghs profile image Sam Vloeberghs Originally published at Updated on ・2 min read

Originally published at on March 1, 2018

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

Originally published at on March 1, 2018

Discussion (0)

Editor guide