Skip to content

Latest commit

 

History

History
63 lines (37 loc) · 3.51 KB

youtube-thumbnail-urls.md

File metadata and controls

63 lines (37 loc) · 3.51 KB
Raw

Lo, the youtube placeholder image!

(AKA the thumbnail, poster image, etc)

YT thumbnails (eg https://i.ytimg.com/vi/ogfYd705cRs/sddefault.jpg) have multiple resolutions with the following widths:

  • maxresdefault: 1280px
  • sddefault: 640px
  • hqdefault: 480px (lol, naming is hard)
  • mqdefault: 320px
  • default: 120px

There is much internet debate on the reliability of thumbnail URLs. And indeed, not every resolution thumbnail is available for every video.

The Google I/O keynote video ogfYd705cRs is available in all, but the classic rickroll video (lXMskKTw3Bc) is missing maxresdefault. And poor ole "because of the lactose" lQKdEdzHnfU is missing the sddefault. (In many, but not all, cases, the deciding factor of having an sddefault is being published after ~2010.)

Finding the right resolution to use

Many folks have given up with a silver bullet and resort to using the YouTube Data API.

amp-youtube also eschews using the API, so they just try sddefault with a hqdefault fallback.

I've started with using hqdefault from i.ytimg to optimize for origin reuse.

Annoying Youtube 404 behavior

When YouTube serves a response for a 404 thumbnail, they serve a true 404 response code (good), however they still serve content-type: image/jpeg and valid JPEG data in the response body. (example). I assume they do this to avoid people seeing broken image icons, but unfortunately this also means you can't rely on img.onerror. The linked SO post and amp-youtube both use onload plus a naturalWidth check to check instead.

Aspect ratios

maxresdefault and mqdefault are 30:17 (very close to 16:9, the HD standard aspect ratio).

sddefault, hqdefault, default are 4:3.

This difference ends up being mostly unimportant, in practice. The YT iframe is a 16:9 size by default. Using background-position: center ensures the (possible) black bars in the 4:3 images are hidden.

WebP

https://i.ytimg.com/vi_webp/${videoid}/${width}.webp

I tested across some old and new videos and here's the best image they had available, counted:

  "maxresdefault.webp (1280px)": 178,
  "sddefault.webp (640px)"     :  21,
  "hqdefault.webp (480px)"     :   8,
  "maxresdefault.jpg (1280px)" :   6,
  "sddefault.jpg (640px)"      :   2,
  "hqdefault.jpg (480px)"      :  89,

My test page (with a smaller set of test videos): https://paulirish.github.io/lite-youtube-embed/testpage/poster-image-summary.html

I found no cases where it a smaller size was not available. For example, if they have the maxresdefault webp, then they definitely have the sddefault webp.

All this means, it'd be very reasonable and efficient to try first for the maxresdefault.webp. If it isn't available (see annoying 404 behavior above), then fall back to hqdefault.jpg.

In lite-youtube-embed's case though, we'll default to trying the sddefault.webp first, as that resolution is plenty for our uses.

The best poster image for your video

See https://paulirish.github.io/lite-youtube-embed/testpage/poster-image-availability.html