social-app
social-app copied to clipboard
bluesky-social
YouTube videos embed at a fixed 16:9 'horizontal' aspect ratio even for vertical or 4:3 videos.
Describe the bug
The embedded video player for youtube URLs blindly calls YouTube's /embed/ setup with no specific configuration, resulting in non-16:9 videos being forced into 16:9 aspect ratio with letter-/pillar-boxing.
To Reproduce
Expected behavior
Video is presented with a fixed width for the timeline and variable height to adapt to the aspect ratio based on the underlying video.
Details
- Platform: Browser, tested Edge/Chrome/Firefox on Windows 11 22H2/Debian Bookworm (yes, including Edge).
- Platform version: Live website.
- App version: N/A
Additional context
The detail for the aspect ratio is available from the 'oembed' query for youtube videos, but comically only if you explicitly request the it with the 'shorts' URL:
https://www.youtube.com/oembed?format=xml&url=https://www.youtube.com/shorts/6OKUXn-pd6s (Joaquin's URL) 113x200 (~9:16)
https://www.youtube.com/oembed?format=xml&url=https://www.youtube.com/shorts/QK8mJJJvaes (Macklemore's "Thrift Shop" music video) 200x113 (~16:9)
Requesting the oembed with the usual /watch?v= URL locks it to 'horizontal' sizes and breaks on queries against shorts, but requesting a non-shorts URL via the /shorts/ oembed works properly. 🤷
https://www.youtube.com/oembed?format=xml&url=https://www.youtube.com/watch?v=6OKUXn-pd6s 200x150 (3:4!?)
https://www.youtube.com/oembed?format=xml&url=https://www.youtube.com/watch?v=QK8mJJJvaes 200x113 (~16:9)
Note that the above URLs also support "format=json" I'm just using the =xml as most browsers will auto-parse that in a much more displayable format for bug discussion.
We can probably just always use 9:16 if the URL is for a short and avoid having to request any oembed info right?
As a simple workaround, yes that would work as well for now. There's also a huge amount of 4:3 videos which the '/shorts/ oembed' query gets 200x150 back for as well though.
Long-term adding some type of metadata field to the URL to specify the aspect ratio on a video embed would be ideal (so clients can specify it but still avoid the pre-query before playback can be initialized) but just making the default for /shorts/ be 9:16 instead of 16:9 would certainly resolve issues short-term.
Why on earth would YouTube: a. not let this be visible in the embed api and b. even support different aspect ratios for shorts i will never understand.
Actually looking at the data from those links I think this is actually easily doable. We are already making a request to YT for the embed so running a fetch for the json isn't a security issue or anything. Should also just be able to make that request whenever it's a shorts link thats getting embeded, no need to do so for normal videos.
Issue is when we remove the embeds when scrolling away from them, we'd then replace the element with the placeholder - which won't be the right dimensions. Notice that the thumbnails from YT are not the correct aspect: https://i.ytimg.com/vi/Dd1WYQSNmmw/hq2.jpg?sqp=-oaymwEoCOADEOgC8quKqQMcGADwAQH4AbYIgAKAD4oCDAgAEAEYZSBVKE8wDw==&rs=AOn4CLAcjhLbZH_7L72f7_N8V4PrUFZVhw . This would result in a weird sort of jump when scrolling away which is no good.
I'll play and see if there's a decent solution though.
A) People have been asking this for LITERALLY a decade.
B) Shorts doesn't, but there's not actually a difference between a short and a normal youtube video except the aspect ratio and time limit on shorts. Every single /shorts/ URL is a valid /watch?v= URL, but /watch?v= ONLY returns 16:9 aspect ratio sizing, while /shorts/ is actually accurate "largest dimension at 200" aspect-ratio-aware sizing.
And yeah the thumbnail is always (even on shorts) 16:9, the YT app crops it down to the reported aspect ratio.
It's a LOT of dumb idiocy accumulated over the last 20 years. XD
Ah right. In that case then I think the short term solution of just sizing the video correctly based on whether it's a short should be okay. People shouldn't be linking to /shorts/ if it isn't actually a short (or is this something that happens a lot?)
Oh no I meant that regardless of the youtube shareable URL (/watch?v= or /shorts/ or /embed/ ) make the oembed query with the /shorts/ URL to get the aspect ratio.
Right. But shorts should always be of the correct aspect ratio right? I.e. I can't go to https://www.youtube.com/shorts/hjvtzpeDioc without being redirected to https://www.youtube.com/watch?v=hjvtzpeDioc. So am I wrong in assuming that YouTube is forcing Shorts uploads to be the correct aspect ratio? (I noticed the other day I uploaded a video and it automatically made it a short, so I assume it was the dimensions)
So if that's the case, then just checking if the url is /shorts/ should be a pretty good fix. As long as people don't themselves link to a shorts video with watch?v=
Sorry if I'm just not understanding 🙏
Oh, yeah, I think we're discussing two different things, my apologies!
-
For the oembed JSON request, always requesting /shorts/ is the only way to get the actual aspect ratio.
-
For a quick fix, yes, just displaying /shorts/ URLs in 9:16 instead of 16:9 fixes everything well enough for now without adding the oembed request.
Sorry for the accidental bifurcation.
Trying to strike a decent balance here, and I think I'm liking this:
On native:
On web:
Going all out is too much. Not a fan and would be worse on smaller screens.:
To that end as well, I think making youtube shorts a separate embed type that can be hidden/shown from regular youtube videos might be good too. Shorts are sort of seen as a "tiktok" type video which some people find annoying.
Yeah this looks REALLY good, doesn't need the 'full' 9:16 because yeah most devices even in portrait mode when you take into account the 'chrome' around things having the whole video fit vertically ends up more like 10:16 or even 12:16 being optimal.
Thank you again!