From 04408cceea17f3e32b6e88edf4da94b26385b026 Mon Sep 17 00:00:00 2001 From: Peter Stone Date: Fri, 23 Oct 2026 10:34:01 +0000 Subject: Give YouTube's player a height, so the picture has somewhere to go Peter, three builds running: audio plays, YouTube's title, controls and scrubber thumbnails all draw, and where the picture belongs there is a blank rectangle. None of my guesses were right. It is not the embed, not the window, and not the surface. It is layout. YouTube's player sizes itself with `body { position: absolute; height: 100% }`, and in this WebView percentage heights resolve against a containing block of zero height. Measured in the running app: window.innerHeight correctly reports 214, while 100vh and every percentage height resolve to 0. The body collapsed, the player chain under it collapsed, and the video element was laid out 380x0. That explains the whole symptom, including the part I kept failing to account for. The page, the chrome and the stream were all healthy -- the picture simply had nowhere to go, and what showed through the zero-height player was YouTube's own white background. So the fix pins the player chain to the pixel height the page does know and dispatches a resize so YouTube's own code re-measures. Verified on a device, with the shipped code and nothing injected by hand: the video element goes 380x0 -> 380x214 and the video plays. Two things ruled out along the way, recorded so they are not retried: hardware-accelerating the dialog's window changed nothing, and nor did moving the player out of a dialog into an in-window overlay. An A/B against BrowserScreen looked decisive for the window and was not -- that WebView differs in layout too, and layout was the real variable. This treats the symptom. Why the viewport has no height is below this app, in WebView. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_018AwnALZL6bD4VBtATDVv3B --- .../org/terst/feedreader/ui/YouTubeLinksTest.kt | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) (limited to 'app/src/test/java/org/terst/feedreader/ui/YouTubeLinksTest.kt') diff --git a/app/src/test/java/org/terst/feedreader/ui/YouTubeLinksTest.kt b/app/src/test/java/org/terst/feedreader/ui/YouTubeLinksTest.kt index af9884d..d2c623c 100644 --- a/app/src/test/java/org/terst/feedreader/ui/YouTubeLinksTest.kt +++ b/app/src/test/java/org/terst/feedreader/ui/YouTubeLinksTest.kt @@ -127,4 +127,33 @@ class YouTubeLinksTest { fun `the watch link for a video is the one a phone can hand to the YouTube app`() { assertEquals("https://www.youtube.com/watch?v=dQw4w9WgXcQ", youTubeWatchUrl("dQw4w9WgXcQ")) } + + // --- giving the player a height ------------------------------------------------------- + + @Test + fun `the fit script sizes the player from the height the page does know`() { + val js = YOUTUBE_FIT_PLAYER_JS + + assertTrue("percentage heights are what resolve to zero: $js", js.contains("window.innerHeight")) + assertTrue(js.contains("dispatchEvent")) + } + + @Test + fun `the fit script overrides YouTube's own styles, which would otherwise win`() { + assertTrue(YOUTUBE_FIT_PLAYER_JS.contains("!important")) + } + + @Test + fun `the fit script covers the video element and the containers above it`() { + val js = YOUTUBE_FIT_PLAYER_JS + + assertTrue(js.contains("html,body")) + assertTrue(js.contains("#movie_player")) + assertTrue(js.contains("video{height:")) + } + + @Test + fun `the fit script does nothing when the page has no height to copy`() { + assertTrue("must not pin the player to zero", YOUTUBE_FIT_PLAYER_JS.contains("if (!h) { return; }")) + } } -- cgit v1.2.3