Widely available Supported across all major browsers. Safe to use in production.

WebVTT cue settings

The align property of the VTTCue interface represents the alignment of all of the lines of text in the text box.

Media

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
align
23
79
31
6
25
8
line

The line property of the VTTCue interface represents the cue line of this WebVTT cue.
23
79
31
6
25
8
position

The position property of the VTTCue interface represents the indentation of the cue within the line.
23
79
31
6
25
8
size

The size property of the VTTCue interface represents the size of the cue as a percentage of the video size.
23
79
31
6
25
8
snapToLines

The snapToLines property of the VTTCue interface is a Boolean indicating if the VTTCue.line property is an integer number of lines, or a percentage of the video size.
23
79
31
6
25
8
vertical

The vertical property of the VTTCue interface is a string representing the cue's writing direction.
23
79
31
6
25
8
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue = new VTTCue(0, 0.9, "Hildy!");
cue.align = "start";
console.log(cue.align);

track.addCue(cue);

Use cases

  • Using WebVTT cue settings

    The align property of the VTTCue interface represents the alignment of all of the lines of text in the text box.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links