Positioning WebVTT text overlay (subtitles) in four corners of the video

Question

Positioning WebVTT text overlay (subtitles) in four corners of the video

3.7k Views Asked by Mark At 04 April 2025 at 23:22

I have a problem with positioning WebVTT subtitles. I'd like to have 4 placeholders in four corners of the video to post some additional data along with the video. The problem is, the positioning acts weird and I guess it's kinda hackish way to do this, so if I'm totally abusing WebVTT for this, please let me know in the comment which generally supported way would be.

Current result I've achieved

Video to use: https://www.w3schools.com/html/mov_bbb.mp4

HTML:

<!DOCTYPE html>
<html>
<body>
<h1>Video test</h1>
<video width="640" height="480" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <track default src="track.vtt">
  Your browser does not support the video tag.
</video>

</body>
</html>

track.vtt file:

WEBVTT

00:00:00.000 --> 00:00:10.000 line:0 align:left position:0% size:50%
AAAAAAAAA

00:00:00.000 --> 00:00:10.000 line:0 align:right position:100% size:50% 
BBBBBBBBB

00:00:00.000 --> 00:00:10.000 line:100% align:left position:0% size:50%
CCCCCCCCC

00:00:00.000 --> 00:00:10.000 line:100% align:right position:100% size:50% 
DDDDDDDDD

I've highligted <video> element in dev tools.

As you can see, the "A", "B" and "C" subtitles are placed correctly, in the corners of the video. But for some reason, "D" are misaligned and shifted to the left.

Any ideas how to fix this and place "D" in the lower right corner of the video?

Original Q&A

There are 1 best solutions below

**Mark** · Accepted Answer

Finally I managed to find some positioning reference on https://www.speechpad.com/captions/webvtt#toc_14

	Horizontal Text Direction	Vertical Text Direction
`position:0% align:start`	Left edge of cue box is at left edge of screen.	Top edge of cue box is at top edge of screen.
`position:0% align:center`	Center of cue box is at left edge of screen. Left half of box is offscreen.	Center of cue box is at top edge of screen. Top half of box is offscreen.
`position:0% align:end`	Right edge of cue box is at left edge of screen. Entire box is offscreen.	Bottom edge of cue box is at top edge of screen. Entire box is offscreen.
`position:0%,line-left align:end`	Right edge of cue box is at right edge of screen.	Top edge of cue box is at top edge of screen.
`position:50% align:start`	Left edge of cue box is at horizontal center of screen.	Top edge of cue box is at vertical center of screen.
`position:50% align:center`	Center of cue box is at horizontal center of screen.	Center of cue box is at vertical center of screen.
`position:50% align:end`	Right edge of cue box is at horizontal center of screen.	Bottom edge of cue box is at vertical center of screen.
`position:100% align:start`	Left edge of cue box is at right edge of screen. Entire box is offscreen.	Top edge of cue box is at bottom edge of screen. Entire box is offscreen.
`position:100%,line-right align:start`	Right edge of cue box is at right edge of screen.	Bottom edge of cue box is at bottom edge of screen.
`position:100% align:center`	Center of cue box is at right edge of screen. Right half of box is offscreen.	Center of cue box is at bottom edge of screen. Bottom half of box is offscreen.
`position:100% align:end`	Right edge of cue box is at right edge of screen.	Bottom edge of cue box is at bottom edge of screen.

Positioning WebVTT text overlay (subtitles) in four corners of the video

There are 1 best solutions below

Related Questions in HTML

Related Questions in HTML5-VIDEO

Related Questions in WEBVTT

Related Questions in VIDEO-SUBTITLES

Trending Questions

Popular # Hahtags

Popular Questions