fix(captions): size cue text by width on portrait players and let the box follow its content - #1088
Conversation
… box follow its content vtt.js sets the cue font to 5% of the display height and pixel-fixes the cue box before video.js adds the .vjs-text-track-cue class, so our caption styles re-wrapped the text after the box was frozen. On portrait players this made captions huge, cut off at the bottom and jumping between cues; any font-size override left the text floating inside a too-tall box. - cap the cue font at 3.5% of the display width (min(5cqh, 3.5cqw)); landscape size is unchanged - height/top auto on bottom-gravity cues (bottom/height auto for top gravity) so the box follows the text, as video.js does for its own fontPercent VIDEO-21222
…ized by width VIDEO-21222
Removed before merge. VIDEO-21222
✅ Deploy Preview for cld-video-player ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for cld-vp-esm-pages ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
VIDEO-21222
Cues are now bottom-anchored, so lifting the caption area from 5em to 1em when the control-bar hides made captions move on hover. Keep the control-bar offset while playing; only players without controls use 1em. VIDEO-21222
|
Non-blocking review notes:
Smaller/non-essential:
None of these block merge in my view — just flagging for awareness / possible follow-up. |
| @@ -0,0 +1,70 @@ | |||
| # Decision log — Portrait captions fix (VIDEO-21222) | |||
There was a problem hiding this comment.
Dont forget to remove before merge
| @@ -0,0 +1,80 @@ | |||
| # Feature Specification: Captions on portrait players | |||
There was a problem hiding this comment.
Dont forget to remove before merge
2 participants
Summary
Captions on portrait (9:16) players rendered with a huge font, got cut off at the bottom of the player and jumped between cues; any font-size override made the text float in the middle instead. Reported for Tudor's training video (VIDEO-21222).
Root cause
top/height/width) inWebVTT.processCuesand only afterwards adds thevjs-text-track-cueclass. Every rule we key on that class (Inter, 700, padding, inline-block) re-wraps the text after the box is frozen, so it spills out of the bottom.font-sizeoverride (page CSS orstyledTextTracks.fontSize) shrinks the text inside a still-tall box: the text floats and moves with each cue's line count.Changes
text-tracks.scss:container-type: sizeon the caption display andfont-size: min(5cqh, 3.5cqw)on cues. Landscape is unchanged (the5cqhterm is vtt.js's own size); portrait is capped at 3.5% of the width.text-tracks.scss/styled-text-tracks.scss:height: auto; top: autoon bottom-gravity cues (bottom: auto; height: autofor top gravity) so the box follows its content, the same trick video.js uses for its ownfontPercentsetting. Center gravity untouched.docs/subtitles-and-captions.html: new "Portrait (9:16) player" section.cue "…" spills below the caption display.Notes
line:position from the top keep their computed bottom edge and grow upward; only visible if the text re-wraps. Accepted trade-off.min()declaration and keep today's size, but still get the content-following box.styledTextTracks.fontSizekeeps working; percentages are now relative to the responsive base.Testing
npx playwright test … subtitlesAndCaptionsPage.spec.ts: 2/2 (existing + new)npm run test:unit: 129 passednpm run lint: cleanFollow-ups
player.cloudinary.com) setsfont-family: Interwith no fallback stack, so iOS renders Times until the webfont loads. Separate repo.specs/portrait-captions/(spec + decision log) is here for review and will be removed before merge.