WebVTT works with the WordPress [video]
shortcode to know when to add the track files. As long as the video file name, track names, and shortcode all line up everything should display correctly.
Below is an example to get a video to offer 2 different subtitle tracks.
Uploaded file names:
- oceans-clip.mp4
- oceans-clip-subtitles-en.vtt
- oceans-clip-subtitles-es.vtt
Edit a page and use the “Text” tab to see the source. Look for the video shortcode block which should look something like this:
[video width="640" height="264" mp4="https://host/wp-content/uploads/2016/05/oceans-clip.mp4"][/video]
Viewing the page should display the video and a video control button to select which subtitle track to use.
Another way to verify that the file names follow the convention is to view the VTT or video file “Attachment Details” in the Media Library. The VTT file will link to the video it will display with and the video will list all available VTT files associated with it. These screenshots match the example above and will hopefully provide more clarity.