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:
parent
ff9b0601c3
commit
d84d5a1819
5 changed files with 130 additions and 8 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue