Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-05-15 07:32:23 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Force YouTube iframe fullscreen with absolute positioning

Browse source 
The previous CSS fix used 100% width/height but YT.Player can bake in
300x150 fallback pixel dimensions if the placeholder isn't laid out at
construction time. Inline pixel dimensions beat percentage CSS at
equal specificity, so the iframe stayed small.

Use absolute positioning with !important to force fullscreen over
whatever YT set inline. Bumped sw cache to v6 to invalidate the
previously-cached player HTML.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ScreenTinker 2026-04-28 15:34:40 -05:00
parent ed46011ae4
commit fb0a7f48dd
2 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
server/player/index.html
View file

@ -34,11 +34,17 @@
/* Player */ /* Player */
#playerContainer { position: fixed; inset: 0; background: #000; } #playerContainer { position: fixed; inset: 0; background: #000; }
/* Fullscreen single-zone playback: YouTube's IFrame API replaces our placeholder /* Fullscreen single-zone playback: YouTube's IFrame API measures the placeholder
with an iframe whose width/height attributes don't always survive layout. Pin at construction time. If that happens before layout settles, YT bakes in a
any direct iframe child to the container so YT/widget embeds fill the screen. */ 300x150 fallback as inline pixel dimensions on the iframe, which our %-based
rules can't override. Force fullscreen via absolute positioning + !important. */
#playerContainer > iframe, #playerContainer > iframe,
#playerContainer > div > iframe { width: 100%; height: 100%; border: none; display: block; } #playerContainer > div > iframe {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
border: none !important; display: block !important;
}
.zone { position: absolute; overflow: hidden; } .zone { position: absolute; overflow: hidden; }
.zone video { width: 100%; height: 100%; object-fit: cover; } .zone video { width: 100%; height: 100%; object-fit: cover; }
.zone img { width: 100%; height: 100%; object-fit: cover; } .zone img { width: 100%; height: 100%; object-fit: cover; }

2
server/player/sw.js
View file

@ -1,4 +1,4 @@
const CACHE_NAME = 'rd-player-v5'; const CACHE_NAME = 'rd-player-v6';
// Install: skip waiting to activate immediately // Install: skip waiting to activate immediately
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {