44r0n7/vidflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile portrait video overflow + preserve YouTube title hiding

Browse Source 
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>
This commit is contained in:
Aaron
2026-05-23 19:30:35 -04:00
parent c1e5fa0fc5
commit 20cc10fbc9
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vidflow.html
+20 -5
View File
@@ -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(){ function sizePW(){
const el = qs('#pw iframe'); if(!el) return; const el = qs('#pw iframe'); if(!el) return;
const vw=window.innerWidth, vh=window.innerHeight; const vw = window.innerWidth, vh = window.innerHeight;
const w = Math.max(vw * 1.12, vh * 1.7778); let w;
const h = Math.max(vh * 1.12, vw * 0.5625); if (vw / vh >= 16 / 9) {
el.style.width=w+'px'; el.style.height=h+'px'; // 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 // Called once by the YT API when the player is ready — sets volume, checks for popup transfer, starts first channel