Fighting with YouTube to show a preview image (opens in new tab)

If you can afford to add a little extra logic to your web server, you can solve this without JavaScript shenanigans (plus it doesn't leak your visitors' IPs to Google. On Nginx, for example:

  location ~ /vi/(.*)/thumbnail($|\..*) {
      error_page 404 = @hqdefault;
      proxy_intercept_errors on;
      proxy_pass https://img.youtube.com/vi/$1/maxresdefault$2;
  }
  
  location @hqdefault {
      proxy_pass https://img.youtube.com/vi/$1/hqdefault$2;
  }

Then simply use /vi/<id>/thumbnail.webp as the image source or adapt the location regex as needed. This can be chained with yet more fallback URLs.

If you're designing the website, why depend on a YT thumbnail? Can't you just use your own image that you have control over, and then load the actual YT when clicked? So many image gallery style components do this. Even if you don't need a gallery, it shows it is clearly possible. It's not like you're trying to work when JS is blocked

So glad to find some like-minded folk who care about this! Nice post, Shane.

Thanks for calling out my research on this. Really glad you found it.

https://github.com/paulirish/lite-youtube-embed/pull/167 has my solution. Basically we only attempt the hqdefault.jpg and the sddefault.webp; no other ones. Based on my research this is (probably) the best solution that optimizes for both latency and coverage. Though, I could see switching the order of two in the future.

Pretty sure the oEmbed solutions folks are mentioning are only reasonable if you're doing this work server-side/eagerly. Obviously that changes things quite a bit.

I seem to remember this stupid behavior with maxresdefault going back at least a decade.

As though there is no way that it could default to the correct thumbnail for any video -- surely it would not just help random hackers like OP, but also be more efficient for internal teams at Google to be able to render a preview for a video knowing only its ID, instead of making an API call to get the correct thumbnail name.

Great example of a 10-minute bug being prioritized at #837,434,212 and never resolved. I'd like to judge harshly, but let's be honest, most codebases older than a month have their share of these embarrassments.

Have you seen the oEmbed format: https://abdus.dev/posts/youtube-oembed/ ?

I was really happy when I discovered it when I was researching how Wagtail CMS implements the embedded content previews.

For your example it returns:

  "thumbnail_url": "https://i.ytimg.com/vi/bJ7mTY9501c/hqdefault.jpg",

The file is smaller but shows up correctly!

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

would love to see the next post on Try fighting with youtube to get your chapters to be shown on a 20 min long video. no amount of editing the video description or metadata has retriggered their backend API to reconsider indexing chapters on your video. YT community posts are full of complaints on this