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"