From fb0a7f48dd3692eab68e062f2b5f542cf0f85a1e Mon Sep 17 00:00:00 2001 From: ScreenTinker Date: Tue, 28 Apr 2026 15:34:40 -0500 Subject: [PATCH] Force YouTube iframe fullscreen with absolute positioning 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) --- server/player/index.html | 14 ++++++++++---- server/player/sw.js | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/server/player/index.html b/server/player/index.html index afc3652..6da4291 100644 --- a/server/player/index.html +++ b/server/player/index.html @@ -34,11 +34,17 @@ /* Player */ #playerContainer { position: fixed; inset: 0; background: #000; } - /* Fullscreen single-zone playback: YouTube's IFrame API replaces our placeholder - with an iframe whose width/height attributes don't always survive layout. Pin - any direct iframe child to the container so YT/widget embeds fill the screen. */ + /* Fullscreen single-zone playback: YouTube's IFrame API measures the placeholder + at construction time. If that happens before layout settles, YT bakes in a + 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 > 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 video { width: 100%; height: 100%; object-fit: cover; } .zone img { width: 100%; height: 100%; object-fit: cover; } diff --git a/server/player/sw.js b/server/player/sw.js index 4413a0a..ef51f89 100644 --- a/server/player/sw.js +++ b/server/player/sw.js @@ -1,4 +1,4 @@ -const CACHE_NAME = 'rd-player-v5'; +const CACHE_NAME = 'rd-player-v6'; // Install: skip waiting to activate immediately self.addEventListener('install', (event) => {