4 ms·

Author here, hi all. There are a number of ways to skin this cat. This is my preferred method. What's yours?

degamad 1y ago
I generally prefer the oEmbed approach. It's mentioned on the SO question linked in Paul Irish's write-up. I'll throw together a sample at some point.
- degamad 1y ago
  So playing around with the goal of "highest quality thumbnail" in mind, I notice that the oEmbed data appears to always return the hqdefault.jpg url, regardless of what's available.
insin 1y ago
I made an Astro component for this [1] which does the iframe srcdoc thing [2] (example page with dozens of videos [3]). Most of the code is just TypeScript types and building a big srcdoc string, so easy to repurpose if anybody wants to. Handling the fallback image has been sitting as an issue in the repo for a while, in favour of just checking it with the Astro dev server when I'm adding new videos, so… yoink‽ [1] https://github.com/insin/astro-lazy-youtube-embed#readme https://github.com/insin/astro-lazy-youtube-embed#readme [2] https://css-tricks.com/lazy-load-embedded-youtube-videos/ https://css-tricks.com/lazy-load-embedded-youtube-videos/ [3] https://jbscript.dev/notes/undefined/the-banterbox https://jbscript.dev/notes/undefined/the-banterbox
degamad 1y ago
I just took a look at the code that's returned when you open https://www.youtube.com/embed/<videoid>?feature=oembed and noticed a couple of additional image file names you may want to check. iurl: "default.jpg", iurlmq: "mqdefault.jpg", iurlhq: "hqdefault.jpg", iurlsd: "sddefault.jpg", iurlpop1: "pop1.jpg", iurlpop2: "pop2.jpg", iurlhq720: "hq720.jpg", iurlmaxres: "maxresdefault.jpg" 120: "default.jpg", 320: "mqdefault.jpg", 480: "hqdefault.jpg", 560: "pop1.jpg", 640: "sddefault.jpg", 854: "pop2.jpg", 1280: "hq720.jpg"
schiffern 1y ago
Easiest solution is just to use the highest resolution thumbnail the official documentation says is supported on all videos (vs "some"), which is hqdefault. https://developers.google.com/youtube/v3/docs/thumbnails https://developers.google.com/youtube/v3/docs/thumbnails Maxresdefault is overkill for this purpose IMO. Why waste the data? Incidentally this is why I run an add-on that redirects all youtube thumbnails to mqdefault, it saves me a nice chunk of bandwidth / memory / perf.

I generally prefer the oEmbed approach. It's mentioned on the SO question linked in Paul Irish's write-up. I'll throw together a sample at some point.

degamad 1y ago
So playing around with the goal of "highest quality thumbnail" in mind, I notice that the oEmbed data appears to always return the hqdefault.jpg url, regardless of what's available.

insin 1y ago

I made an Astro component for this [1] which does the iframe srcdoc thing [2] (example page with dozens of videos [3]). Most of the code is just TypeScript types and building a big srcdoc string, so easy to repurpose if anybody wants to. Handling the fallback image has been sitting as an issue in the repo for a while, in favour of just checking it with the Astro dev server when I'm adding new videos, so… yoink‽ [1] https://github.com/insin/astro-lazy-youtube-embed#readme https://github.com/insin/astro-lazy-youtube-embed#readme [2] https://css-tricks.com/lazy-load-embedded-youtube-videos/ https://css-tricks.com/lazy-load-embedded-youtube-videos/ [3] https://jbscript.dev/notes/undefined/the-banterbox https://jbscript.dev/notes/undefined/the-banterbox

degamad 1y ago

I just took a look at the code that's returned when you open https://www.youtube.com/embed/<videoid>?feature=oembed and noticed a couple of additional image file names you may want to check. iurl: "default.jpg", iurlmq: "mqdefault.jpg", iurlhq: "hqdefault.jpg", iurlsd: "sddefault.jpg", iurlpop1: "pop1.jpg", iurlpop2: "pop2.jpg", iurlhq720: "hq720.jpg", iurlmaxres: "maxresdefault.jpg" 120: "default.jpg", 320: "mqdefault.jpg", 480: "hqdefault.jpg", 560: "pop1.jpg", 640: "sddefault.jpg", 854: "pop2.jpg", 1280: "hq720.jpg"

schiffern 1y ago

Easiest solution is just to use the highest resolution thumbnail the official documentation says is supported on all videos (vs "some"), which is hqdefault. https://developers.google.com/youtube/v3/docs/thumbnails https://developers.google.com/youtube/v3/docs/thumbnails Maxresdefault is overkill for this purpose IMO. Why waste the data? Incidentally this is why I run an add-on that redirects all youtube thumbnails to mqdefault, it saves me a nice chunk of bandwidth / memory / perf.