Skip to content

Show native subtitles when the video is fullscreen#15734

Open
abeddow91 wants to merge 1 commit intomainfrom
ab/show-fullscreen-subtitles
Open

Show native subtitles when the video is fullscreen#15734
abeddow91 wants to merge 1 commit intomainfrom
ab/show-fullscreen-subtitles

Conversation

@abeddow91
Copy link
Copy Markdown
Contributor

@abeddow91 abeddow91 commented Apr 21, 2026

What does this change?

Adds css rules to control the visibility of native subtitles when a video is fullscreen.

NB the positioning of cues in handleLoadedMetadata is currently causing cues to crash into progress bar in fullscreen. This will be addressed in a future PR.

Why?

When a video is played inline, DCR prefers custom subtitle overlay and so hides the native subtitles with CSS.

With the introduction of default (or long form) self hosted videos, there is a requirement to support the video player in fullscreen. Up until now, no self hosted video types support fullscreen. In order to fulfill this requirement, we will be serving the native browser fullscreen implementation as a first pass, rather than a custom overlay.

Screenshots

Before After
before after

Comment on lines 50 to 52
}
`;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These have been removed for now as they're not being used and the fullscreen version should use native design for now.

@abeddow91 abeddow91 self-assigned this Apr 21, 2026
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Apr 21, 2026
@abeddow91 abeddow91 marked this pull request as draft April 21, 2026 17:24
@abeddow91 abeddow91 force-pushed the ab/show-fullscreen-subtitles branch from ee9d903 to 6cae7d9 Compare April 22, 2026 08:16
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 22, 2026
@abeddow91 abeddow91 force-pushed the ab/show-fullscreen-subtitles branch from 6cae7d9 to a977b21 Compare April 22, 2026 09:19
@abeddow91 abeddow91 marked this pull request as ready for review April 22, 2026 09:42
@github-actions
Copy link
Copy Markdown

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@abeddow91 abeddow91 added run_chromatic Runs chromatic when label is applied feature Departmental tracking: work on a new feature labels Apr 22, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature fronts + curation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant