When playing a youtube video, after pressing play the actual video player shrinks really small. Please audit all embed media playback #228

New Issue

2026-09-21T19:41:20-04:00

jared commented

2026-09-21 19:41:20 -04:00

Claude debug this

embed228-before.png

126 KiB

embed228-after.png

106 KiB

jared added the bug area: appearance priority: medium research ux labels 2026-09-21 19:41:54 -04:00

jared referenced this issue from a commit

2026-09-23 15:41:31 -04:00

fix(embeds): players fill the card and keep their aspect ratio (#228)

jared commented

2026-09-23 15:42:01 -04:00

Debugged — two separate sizing bugs, both fixed in 08abf5ae.

1. The player collapsed on play (your report). UrlPreview is a flex row, and the video embed's wrapping column had no width, so it shrink-to-fit its content. Before play the facade's <img> supplied that width; the player <iframe> is absolutely positioned (inset: 0) and supplies none, so pressing play collapsed the whole embed to the iframe's ~200 px intrinsic size. Measured in a 608 px card: 606×341 → 204×115. Both the video and TikTok columns are now width: 100%.

2. Found while auditing: portrait embeds were ~2× too tall. EmbedMediaPortrait got its 9:16 from padding-top: 177.78%, but a padding percentage resolves against the containing block's width, not the element's — so a Short/TikTok inside a wide card rendered 300×1077 instead of 300×533. Now capped with min(), exact at ≥ 300 px and still correct on narrower phones.

Audit of every provider, measured before and after play at 1300 px, 500 px and Pixel 7:

provider	box	ratio	stable across play
YouTube	606×341	0.56 (16:9)	✅
Vimeo	606×341	0.56	✅
Twitch	606×341	0.56	✅
YouTube Shorts	300×533	1.78 (9:16)	✅
TikTok	300×533	1.78	✅
Spotify	606×152	fixed	✅
SoundCloud	606×166	fixed	✅

Rich post embeds (X / Instagram / Reddit / Bluesky) self-size via postMessage and were already width: 100%.

Before (the collapse) / after (filling the card):

Debugged — two separate sizing bugs, both fixed in 08abf5ae. **1. The player collapsed on play (your report).** `UrlPreview` is a flex **row**, and the video embed's wrapping column had no width, so it shrink-to-fit its content. Before play the facade's `<img>` supplied that width; the player `<iframe>` is absolutely positioned (`inset: 0`) and supplies none, so pressing play collapsed the whole embed to the iframe's ~200 px intrinsic size. Measured in a 608 px card: **606×341 → 204×115**. Both the video and TikTok columns are now `width: 100%`. **2. Found while auditing: portrait embeds were ~2× too tall.** `EmbedMediaPortrait` got its 9:16 from `padding-top: 177.78%`, but a padding percentage resolves against the **containing block's** width, not the element's — so a Short/TikTok inside a wide card rendered **300×1077** instead of 300×533. Now capped with `min()`, exact at ≥ 300 px and still correct on narrower phones. **Audit of every provider**, measured before *and* after play at 1300 px, 500 px and Pixel 7: | provider | box | ratio | stable across play | |---|---|---|---| | YouTube | 606×341 | 0.56 (16:9) | ✅ | | Vimeo | 606×341 | 0.56 | ✅ | | Twitch | 606×341 | 0.56 | ✅ | | YouTube Shorts | 300×533 | 1.78 (9:16) | ✅ | | TikTok | 300×533 | 1.78 | ✅ | | Spotify | 606×152 | fixed | ✅ | | SoundCloud | 606×166 | fixed | ✅ | Rich post embeds (X / Instagram / Reddit / Bluesky) self-size via postMessage and were already `width: 100%`. Before (the collapse) / after (filling the card): ![before](https://code.lotusguild.org/attachments/3e08bab4-fbb9-485e-b4bb-779cca749df0) ![after](https://code.lotusguild.org/attachments/09ba6319-53ab-42e5-8293-724d8133bce4)

jared closed this issue

2026-09-23 15:42:01 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: LotusGuild/cinny#228