feat(player): keyboard + scroll-wheel controls in the video modal

Adds player-modal shortcuts and keeps keyboard focus on the modal (not the
cross-origin player iframe) on open and on player-ready, so they work until you
click into YouTube's native controls:
- F: toggle fullscreen (the player stage element, so the volume flash stays
  visible; a :fullscreen CSS rule drops the 16:9 letterbox). Esc in fullscreen
  exits fullscreen only, without also closing the modal.
- Space: play/pause (ignored while a button/input is focused).
- Scroll wheel over the video: volume up/down with an auto-fading volume-bar
  overlay. A transparent interaction layer over the iframe catches the wheel
  (the cross-origin iframe otherwise swallows it) and maps click to play/pause;
  it leaves the bottom strip uncovered so YouTube's native control bar (seek /
  settings / captions / fullscreen) stays usable, and is hidden on an embed
  error so the 'Open on YouTube' CTA stays clickable.
i18n shortcutsHint EN/HU/DE.
This commit is contained in:
npeter83 2026-06-29 23:37:18 +02:00
parent ff9b0601c3
commit d84d5a1819
5 changed files with 130 additions and 8 deletions

View file

@ -262,6 +262,15 @@ html[data-scheme="youtube"][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 {
width: 100vw;
height: 100vh;
aspect-ratio: auto;
border-radius: 0;
}
/* Thin, theme-aware scrollbars */
* {
scrollbar-color: var(--border) transparent;