VTTRegion

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The VTTRegion interface of the WebVTT API describes a portion of the video to render a VTTCue onto.

Constructor

VTTRegion()

Returns a newly created VTTRegion object.

Instance properties

VTTRegion.id

A string that identifies the region.

VTTRegion.width

Represents the width of the region, as a percentage of the video.

VTTRegion.lines

Represents the height of the region, in number of lines.

VTTRegion.regionAnchorX

Represents the region anchor X offset, as a percentage of the region.

VTTRegion.regionAnchorY

Represents the region anchor Y offset, as a percentage of the region.

VTTRegion.viewportAnchorX

Represents the viewport anchor X offset, as a percentage of the video.

VTTRegion.viewportAnchorY

Represents the viewport anchor Y offset, as a percentage of the video.

VTTRegion.scroll

An enum representing how adding a new cue will move existing cues.

Examples

js
const region = new VTTRegion();
region.width = 50; // Use 50% of the video width
region.lines = 4; // Use 4 lines of height.
region.viewportAnchorX = 25; // Have the region start at 25% from the left.
const cue = new VTTCue(2, 3, "Cool text to be displayed");
cue.region = region; // This cue will be drawn only within this region.

Specifications

Specification
WebVTT: The Web Video Text Tracks Format
# the-vttregion-interface

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
VTTRegion
VTTRegion() constructor
id
lines
regionAnchorX
regionAnchorY
scroll
viewportAnchorX
viewportAnchorY
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support