josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fill viewport in fullscreen playback

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-06 02:27:42 +08:00
parent 1ba3f8704b
commit 1cad18826b
2 changed files with 65 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/styles.css
View File

@@ -3905,6 +3905,35 @@ body.presenter-open { overflow: hidden; }
.player-stage { touch-action: pan-y; } /* page still scrolls; we get double-tap + pinch */
:fullscreen .player-stage, .player-stage:fullscreen,
body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or the iOS landscape one): swipes too */
/* Native fullscreen keeps the ordinary stage's aspect ratio and pane width unless
all sizing constraints are explicitly reset. This also covers every layout's
player because fullscreen is a cross-layout surface. */
:is(.player-stage:fullscreen, .player-stage.orientation-fullscreen.orientation-overlay) {
position: fixed !important;
inset: 0 !important;
width: 100dvw !important;
height: 100dvh !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
background: #000 !important;
}
.player-stage.orientation-fullscreen > video {
flex: none !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
}
#video { transform-origin: center center; transition: transform 0.05s linear; }
.gesture-hud {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;