Adding subtitles and captions to your videos

SmartVideo supports captions and subtitles in two ways: auto-imported from YouTube/Vimeo, or manually added via VTT/SRT files.

YouTube and Vimeo captions (auto-import)

If your video source is YouTube or Vimeo, SmartVideo can automatically import existing captions during the optimization process. Ideally the captions are enabled on the source video before SmartVideo processes it for the first time, but it isn’t strictly required (see below).

To enable caption import for YouTube and Vimeo:

• WordPress plugin: Go to SmartVideo settings and check the YouTube captions option
• JavaScript snippet: Add youtubecaptions: true to your swarmoptions configuration

The setting is named after YouTube for historical reasons, but it enables caption import for both YouTube and Vimeo videos.

Enabled captions on the source after the video was converted? No problem, as long as no captions were imported the first time around: with the caption option enabled, simply loading a page with the video on it prompts SmartVideo to fetch the captions for the already-converted video. Give it a little time after the page load, then check the player for the CC control.

Adding more languages later works differently: once SmartVideo has imported captions for a video, it won’t re-check the source for new ones. To pull in languages added after the first import, put a fresh copy of the video on YouTube/Vimeo (with all caption languages fully processed), then swap your site’s embed to that new version. SmartVideo processes it from scratch and imports everything it finds.

Auto-imported captions from YouTube are currently English only. For Vimeo, SmartVideo imports every caption language available on the source video; the player shows the English track automatically, and additional imported languages can be wired up with <track> elements (below) if you need them displayed.

To display one of the additional imported languages, get its caption URL with the captionsUrl helper (run this in your browser console on any page with SmartVideo loaded):

swarmify.captionsUrl("https://player.vimeo.com/video/123456789", "es")

The first argument is the original video URL, the second is the language code. Paste the returned URL into a <track> element’s src (see below), and the language shows up in the player’s captions menu.

Manual captions with VTT or SRT files

For full control over your captions, use the standard <track> element inside your SmartVideo tag. This works with VTT and SRT caption files.

<smartvideo src="video.mp4" width="1280" height="720" controls>
  <track default kind="captions" srclang="en" label="English" src="captions.vtt">
</smartvideo>

Multiple languages

You can add captions in multiple languages by including additional <track> elements. The one marked with default will be shown first, and viewers can switch between languages from the captions menu in the player controls.

<smartvideo src="video.mp4" width="1280" height="720" controls>
  <track default kind="captions" srclang="en" label="English" src="captions-en.vtt">
  <track kind="captions" srclang="es" label="Español" src="captions-es.vtt">
  <track kind="captions" srclang="fr" label="Français" src="captions-fr.vtt">
</smartvideo>

How captions show up in the player

• One caption track: the player shows a single CC toggle on the control bar (or inside the three-dot overflow menu on narrow players). Tap it once to turn captions on, tap again to turn them off.
• Multiple caption tracks: the CC button opens a submenu so viewers can pick a language or turn captions off.
• No caption files: the CC option is hidden entirely — you won’t see a stray “Captions” entry on videos that don’t have any.

Quick reference

For more details on the <track> element, see Mozilla’s reference documentation.

Keywords: captions, subtitles, VTT, SRT, track, YouTube captions, youtubecaptions, multiple languages, accessibility