diff --git a/vidflow.html b/vidflow.html index 8dfa3e8..561f379 100644 --- a/vidflow.html +++ b/vidflow.html @@ -474,13 +474,28 @@ window.onYouTubeIframeAPIReady = function(){ }); }; -// Oversizes the iframe beyond the viewport so no black bars ever show +// Sizes the iframe to fill the viewport without horizontal overflow. +// Height is always vh so the iframe top is pinned to y=0 — the YouTube title bar +// (shown briefly when a video starts) lands inside the #tb overlay area (52px, z-index:5) +// and stays hidden from view. #pw has overflow:hidden + background:#000 for letterbox bars. +// +// Wider than 16:9 (landscape / ultrawide): constrain width to height × aspect ratio +// so the video is never taller than the screen (side black bars from #pw background). +// Narrower than 16:9 (portrait): fill the full viewport — YouTube letterboxes the 16:9 +// video internally with black bars above and below the video content. function sizePW(){ const el = qs('#pw iframe'); if(!el) return; - const vw=window.innerWidth, vh=window.innerHeight; - const w = Math.max(vw * 1.12, vh * 1.7778); - const h = Math.max(vh * 1.12, vw * 0.5625); - el.style.width=w+'px'; el.style.height=h+'px'; + const vw = window.innerWidth, vh = window.innerHeight; + let w; + if (vw / vh >= 16 / 9) { + // Landscape or wider — constrain width so no vertical cropping; may have side black bars + w = Math.min(vw, vh * 16 / 9); + } else { + // Portrait — fill viewport; YouTube handles 16:9 letterbox internally + w = vw; + } + el.style.width = w + 'px'; + el.style.height = vh + 'px'; } // Called once by the YT API when the player is ready — sets volume, checks for popup transfer, starts first channel