[HN Gopher] Fighting with YouTube to show a preview image
       ___________________________________________________________________
        
       Fighting with YouTube to show a preview image
        
       Author : shaneos
       Score  : 33 points
       Date   : 2025-08-11 16:11 UTC (2 days ago)
        
 (HTM) web link (shaneosullivan.wordpress.com)
 (TXT) w3m dump (shaneosullivan.wordpress.com)
        
       | shaneos wrote:
       | Author here, hi all. There are a number of ways to skin this cat.
       | This is my preferred method. What's yours?
        
         | degamad wrote:
         | 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.
        
         | insin wrote:
         | 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
        
       | mzajc wrote:
       | 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.
        
       | dylan604 wrote:
       | 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
        
       ___________________________________________________________________
       (page generated 2025-08-13 23:00 UTC)