fix(player): F maximises without the Fullscreen API, so YouTube's own controls work
Root cause, measured in Chrome/Brave/Firefox alike (so: spec behaviour, not a browser bug): a cross-origin embed reads its fullscreen state from ITS OWN document. While we hold the browser's fullscreen lock — on our wrapper OR on the iframe element — the YouTube player never learns it is fullscreen, so its own fullscreen button stays in the "enter" state and clicking it changes nothing visible. Every other YouTube control works, which is exactly what the user saw. So we stop taking the lock: F now toggles a CSS layer (`player-stage--max`) that fills the viewport. The page stays non-fullscreen, so the embed's own fullscreen button behaves natively, and our own overlays and shortcuts keep working because our DOM is what's on screen. Escape steps out of maximise before closing. Verified end to end in real Chrome: - F -> stage 1920x889, document.fullscreenElement null (no lock taken) - YouTube's own fullscreen button -> real fullscreen (innerHeight 889 -> 1024, fullscreenElement becomes the IFRAME) and its icon flips to "exit" - clicking it again -> back to the maximised view, our class still applied - wheel volume while maximised: 100 -> 85, with the level flash visible Drops the "YouTube fullscreen" toolbar button added earlier today: with the lock gone, YouTube's own button does that job correctly.
This commit is contained in:
+13
-3
@@ -579,15 +579,25 @@ html[data-scheme="matrix"][data-theme="light"] {
|
||||
}
|
||||
}
|
||||
|
||||
/* The in-app player stage, when fullscreened via the F key / native button, fills the screen
|
||||
instead of keeping its 16:9 letterbox (and drops the rounded top corners). */
|
||||
.player-stage:fullscreen {
|
||||
/* The in-app player stage filling the screen: either because something fullscreened it (YouTube's
|
||||
own button hands the lock to the iframe, not to us — but keep this for any browser that does),
|
||||
or via our own F-key maximise. `--max` deliberately does NOT use the Fullscreen API: while we
|
||||
hold the browser's lock, the cross-origin YouTube embed never learns it is fullscreen and its own
|
||||
fullscreen button stops working (see PlayerModal.toggleFullscreen). */
|
||||
.player-stage:fullscreen,
|
||||
.player-stage--max {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
aspect-ratio: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.player-stage--max {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999; /* the tuner level — above the modal chrome it is nested in */
|
||||
}
|
||||
|
||||
/* Thin, theme-aware scrollbars */
|
||||
* {
|
||||
scrollbar-color: var(--border) transparent;
|
||||
|
||||
Reference in New Issue
Block a user