From 20cc10fbc960c2b01e7e053ce359eafb80cc882e Mon Sep 17 00:00:00 2001
From: Aaron <44r0n7+Claude@pm.me>
Date: Sat, 23 May 2026 19:30:35 -0400
Subject: [PATCH] Fix mobile portrait video overflow + preserve YouTube title
 hiding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

sizePW() rewritten: iframe height is always exactly vh so the top of the iframe
aligns with y=0. The YouTube title bar (shown briefly on play) falls within the
52px #tb overlay (z-index:5) and stays hidden.

Portrait (vw/vh < 16:9): w=vw, h=vh — YouTube letterboxes the 16:9 video
  internally; no horizontal overflow.
Landscape / ultrawide (vw/vh >= 16:9): h=vh, w=min(vw, vh×1.778) — no vertical
  cropping; side black bars from #pw background on very wide screens.

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

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