Skip to content

Custom fullscreen controls#15845

Merged
abeddow91 merged 4 commits into
mainfrom
ab/custom-fullscreen-controls
May 13, 2026
Merged

Custom fullscreen controls#15845
abeddow91 merged 4 commits into
mainfrom
ab/custom-fullscreen-controls

Conversation

@abeddow91
Copy link
Copy Markdown
Contributor

@abeddow91 abeddow91 commented May 12, 2026

What does this change?

Allows videos to use the custom controls and subtitles* by providing the video container with a ref and targeting that with the fullscreen api.

*NB, custom overlay for controls and subtitles will not appear on webkit mobile as webkit hands over to the native video player and we cannot render an overlay on top of this. This will be addressed in a follow up PR

Why?

To provide a more consistent ux experience for our users and provides out of the box subtitle styling for most browsers.

Screenshots

Screen.Recording.2026-05-12.at.08.18.20.mov

@abeddow91 abeddow91 self-assigned this May 12, 2026
@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.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 12, 2026

@abeddow91 abeddow91 assigned abeddow91 and unassigned abeddow91 May 12, 2026
@abeddow91 abeddow91 force-pushed the ab/custom-fullscreen-controls branch from fb461ba to 3136a0a Compare May 12, 2026 07:21
@abeddow91 abeddow91 added the feature Departmental tracking: work on a new feature label May 12, 2026
Copy link
Copy Markdown
Contributor

@domlander domlander left a comment

Choose a reason for hiding this comment

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

Is the extra div so that we can use our custom controls (mute, fullscreen) in fullscreen mode?

I've tested and it works well for me

@abeddow91
Copy link
Copy Markdown
Contributor Author

Is the extra div so that we can use our custom controls (mute, fullscreen) in fullscreen mode?

Yes exactly that. Previously we were clicking to fullscreen via the video ref and so, because the controls are a sibling, they weren't included. Adding a wrapper that can be targetted means we get the video, subtitles and controls.

@abeddow91 abeddow91 merged commit 5b7d9db into main May 13, 2026
27 of 28 checks passed
@abeddow91 abeddow91 deleted the ab/custom-fullscreen-controls branch May 13, 2026 08:02
@gu-prout
Copy link
Copy Markdown

gu-prout Bot commented May 13, 2026

Seen on PROD (merged by @abeddow91 17 minutes and 2 seconds ago) Please check your changes!

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 Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants