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

Fix YouTube title reappearing: oversize height in portrait to clip title off-screen

Browse Source 
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>
This commit is contained in:
Aaron
2026-05-23 19:34:42 -04:00
parent 20cc10fbc9
commit bd4613b6f2
1 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vidflow.html
+23 -15
View File
@@ -474,28 +474,36 @@ window.onYouTubeIframeAPIReady = function(){
}); });
}; };
// Sizes the iframe to fill the viewport without horizontal overflow. // Sizes and positions the iframe so the YouTube title bar (shown briefly on play)
// Height is always vh so the iframe top is pinned to y=0 — the YouTube title bar // is always clipped above the visible viewport. #pw has overflow:hidden so anything
// (shown briefly when a video starts) lands inside the #tb overlay area (52px, z-index:5) // outside the viewport is invisible. #pw background:#000 provides letterbox bars.
// 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 // The trick: oversize the iframe height so it extends ~60px above and below the
// so the video is never taller than the screen (side black bars from #pw background). // viewport. The CSS centering (top:50% translateY(-50%)) does the math automatically.
// Narrower than 16:9 (portrait): fill the full viewport — YouTube letterboxes the 16:9 // The title bar at the top of the iframe sits at y ≈ -60px — off-screen.
// video internally with black bars above and below the video content. //
// 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(){ 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;
let w; let w, h;
if (vw / vh >= 16 / 9) { if (vw < vh) {
// Landscape or wider — constrain width so no vertical cropping; may have side black bars // Portrait — cap width, oversize height just enough to push title off-screen
w = Math.min(vw, vh * 16 / 9);
} else {
// Portrait — fill viewport; YouTube handles 16:9 letterbox internally
w = vw; 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.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 // Called once by the YT API when the player is ready — sets volume, checks for popup transfer, starts first channel