[shaneos]

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

[schiffern]

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

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.

[insin]

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

[2] https://css-tricks.com/lazy-load-embedded-youtube-videos/

[3] https://jbscript.dev/notes/undefined/the-banterbox

[degamad]

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]

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.

[degamad]

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"