Custom fullscreen controls#15845
Conversation
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
…hole video is centered and visible
fb461ba to
3136a0a
Compare
domlander
left a comment
There was a problem hiding this comment.
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
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. |
|
Seen on PROD (merged by @abeddow91 17 minutes and 2 seconds ago) Please check your changes! |
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