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

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.

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

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.

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"