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

Pin YouTube iframe to fill the player container

Browse source 
The .zone iframe sizing rule only applies to multi-zone layouts. In
fullscreen single-zone mode the YT IFrame API replaces our placeholder
div with an iframe directly inside #playerContainer, where no CSS rule
sized it — leaving it at the iframe default size (~300x150) and
producing a tiny square in the corner. Added explicit rules so any
iframe child of #playerContainer fills the viewport.

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

5
server/player/index.html
View file

@ -34,6 +34,11 @@
/* 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
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. */
#playerContainer > iframe,
#playerContainer > div > iframe { width: 100%; height: 100%; border: none; display: block; }
.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; }