From bd4613b6f2527612383945aaf3e7d100d030e867 Mon Sep 17 00:00:00 2001
From: Aaron <44r0n7+Claude@pm.me>
Date: Sat, 23 May 2026 19:34:42 -0400
Subject: [PATCH] Fix YouTube title reappearing: oversize height in portrait to
 clip title off-screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Portrait (vw < vh): w=vw (no horizontal overflow), h=vh+120 so the iframe
extends 60px above the viewport. The YouTube title bar at the iframe top sits
at y≈-60px and is clipped by #pw overflow:hidden — same mechanism as before.
YouTube letterboxes the 16:9 video within the tall iframe; black bars top/bottom.

Landscape/desktop: restored original formula (vw×1.12 / vh×1.7778) unchanged.

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 vidflow.html | 38 +++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/vidflow.html b/vidflow.html
index 561f379..0631a04 100644
--- a/vidflow.html
+++ b/vidflow.html
@@ -474,28 +474,36 @@ window.onYouTubeIframeAPIReady = function(){
   });
 };
 
-// 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.
+// Sizes and positions the iframe so the YouTube title bar (shown briefly on play)
+// is always clipped above the visible viewport. #pw has overflow:hidden so anything
+// outside the viewport is invisible. #pw background:#000 provides 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.
+// The trick: oversize the iframe height so it extends ~60px above and below the
+// viewport. The CSS centering (top:50% translateY(-50%)) does the math automatically.
+// The title bar at the top of the iframe sits at y ≈ -60px — off-screen.
+//
+// Portrait (vw < vh): cap width to vw (fixes the horizontal overflow on phones).
+//   Height is oversized so title bar is still clipped above the viewport.
+//   YouTube letterboxes the 16:9 video within the tall iframe; black bars appear
+//   above and below the video content — the user said that's acceptable.
+//
+// Landscape / desktop: use the original formula — oversizes both dimensions by ~12%
+//   so the video covers the screen and the title bar is clipped on all sides.
 function sizePW(){
   const el = qs('#pw iframe'); if(!el) return;
   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
+  let w, h;
+  if (vw < vh) {
+    // Portrait — cap width, oversize height just enough to push title off-screen
     w = vw;
+    h = vh + 120; // 60px above + 60px below; centered by CSS transform
+  } else {
+    // Landscape / desktop — original cover formula
+    w = Math.max(vw * 1.12, vh * 1.7778);
+    h = Math.max(vh * 1.12, vw * 0.5625);
   }
   el.style.width  = w + 'px';
-  el.style.height = vh + 'px';
+  el.style.height = h + 'px';
 }
 
 // Called once by the YT API when the player is ready — sets volume, checks for popup transfer, starts first channel