Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Fighting with YouTube to show a preview image

shaneosullivan.wordpress.com

Post reply on HN
Print view View original

1–10 of 24 posts

Re: Fighting with YouTube to show a preview image

#3

Post by degamad »

shaneos wrote: post #2

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

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.

Re: Fighting with YouTube to show a preview image

#4

Post by mzajc »

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//thumbnail.webp as the image source or adapt the location regex as needed. This can be chained with yet more fallback URLs.

Re: Fighting with YouTube to show a preview image

#5

Post by insin »

shaneos wrote: post #2

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

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

Re: Fighting with YouTube to show a preview image

#6

Post by dylan604 »

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

Re: Fighting with YouTube to show a preview image

#7

Post by mcphage »

dylan604 wrote: post #6

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

You’d probably want it to match YouTube’s preview image, so if your reader sees the video on YouTube proper at a later date, they’ll recognize it. I’m not sure of a good way to do that, since it’s not necessarily a screengrab from the middle of the video.

Re: Fighting with YouTube to show a preview image

#8

Post by xp84 »

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.

Re: Fighting with YouTube to show a preview image

#9

Post by dylan604 »

mcphage wrote: post #7
dylan604 wrote: post #6

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

You’d probably want it to match YouTube’s preview image, so if your reader sees the video on YouTube proper at a later date, they’ll recognize it. I’m not sure of a good way to do that, since it’s not necessarily a screengrab from the middle of the video.

Does YT not allow you to set a poster frame? I'm not a heavy YT poster and am much more familiar with Vimeo that does allow a custom poster frame. In that case, you could ensure the poster is the same everywhere.

Re: Fighting with YouTube to show a preview image

#10

Post by degamad »

shaneos wrote: post #2

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

I just took a look at the code that's returned when you open https://www.youtube.com/embed/?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"
Post reply on HN