Styling and positioning the captions/subtitles


In this section, we will look at different possibilities for positioning and styling the text displayed as captions/subtitles while playing a video.

This video example shows each use case. We also “cooked” an easier version to study on JS Bin (look at the HTML in JS Bin).

  1. 00:00:11.000 –> 00:00:15.000 position:5% align:start
  2. This cue is positioned at the left side of the video.

There are several possible values:

    • line:5% means “vertical position at a line 5% of the height of the video viewport (it will be located at the top of the video, proportional to its vertical size).
    • position:5% align:start means “regular location at the bottom of the video, the start of the sentence will be located at 5% of the width of the video”, i.e., near the left side.
    • position:95% align:end means “regular location at the bottom of the video, the end of the sentence will be at 95% of the horizontal width of the video”.
    • size:33% The size of each line will be one third of the size of the video. Since the sentence won’t fit, it will be displayed in multiple lines.

And so on. Please look at the video as it is self-explanatory.



It is possible to style using CSS classes as part of a cue value, using the <c> element. You can specify the CSS class that should be applied by adding “.” followed by the name of your CSS class. Here is an example:

  1. <c.myclass>This cue contains the class “myclass”.
  2. Browsers that support ::cue CSS should make it red.</c>

CSS rules used in this example:

  1. <style type=“text/css”>
  2.      ::cue(.myclass) { color: red; }
  3.      ::cue(v[voice=“Tarzan”]) { color: blue; }
  4.      ::cue(v[voice=“Jane”]) { color: green; }
  5.      ::cue(#bigtext) { fontsize: 150%; }
  6. </style>

The ::cue pseudo element selector is used to match “cues” in the webVTT file. You add parenthesis and a secondary CSS selector to match cues that have a particular id, or a particular CSS class, etc. Look at the CSS above and at the extract from the webVTT file, play the video, you will understand how this works…

Support differs from one browser to another, see this compatibility table for more info. Notice that most of the enhanced players presented further on in the course will provide full support.


Screenshot taken at 1:02 of this example online:

Using the <v> tag, you will distinguish different voices that should be displayed in different colors (depending on the HTML5 video player implementation). See the CSS presented in the previous section to see how to specify the colors for the different voices.

Extract from the source code:

  1. 00:00:56.000 –> 00:01:04.000
  2. <v Tarzan>Me Tarzan
  3. <v Jane>That would make me Jane!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s