Sometimes when working on web projects, there may be cases where we want to display a YouTube video’s thumbnail on our webpage. YouTube provides specific url endpoints that can be used to grab a video’s thumbnail.

When researching the topic, most will try to use the largest thumbnail size that is provided for a video, accessible at the url: https://img.youtube.com/vi/<video ID>/maxresdefault.jpg . For most videos where a high-quality upload was made, this endpoint is usually available. This is usually stuck directly in an <img> tag like so:

<img src="https://img.youtube.com/vi/<video ID>/maxresdefault.jpg" />

However, Depending on the video, the thumbnail size may not be available. If the thumbnail image is only used in specific locations, this might not be an issue: you can just change it to a lower-res thumbnail image. But in a lot of cases this may be added dynamically, for example in a video post list. In these situations, we need a method that can automatically fallback to a different size.

This is not too difficult if we can check on the back-end, as we can check if it returns a 404. But it is a bit tricky with JavaScript only, as YouTube returns a 404, however it also returns a proper image, so the img tag does not see anything wrong.

Below is a one-liner script to enable falling back to another thumbnail size.

One-Liner Script To Fallback maxresdefault.jpg Image to hqdefault.jpg

If you’re not too picky on what thumbnail size to fallback to, below is a one-liner that can be added to any <img> tag to fallback to hqdefault.jpg:

<img src="https://img.youtube.com/vi/[video id]/maxresdefault.jpg" style="opacity: 0;" onload="if(this.naturalHeight > 90 ) { this.style.removeProperty('opacity'); this.onload=null; return; } var n=this.src.replace('maxres','hq'); this.src=''; this.src=n; this.style.removeProperty('opacity'); this.onload=null;">

The above script and style will do the following:

  1. Add a script to the onload event of the img tag. This will fire when the image is done loading. Opacity is also set to 0.
  2. We will utilize the fact that the 404 image is 120×90 pixels. If the loaded image is larger than 90px height, we have our thumbnail, we will show our image and remove this event handler.
  3. If the loaded image is 90px or less, it is probably the 404 image. We will change the src from maxresdefault.jpg to hqdefault.jpg.
  4. Number 3 will cause load event to fire again once the new image is loaded, and we go back to Number 2.

This is enough if we just want to use maxresdefault.jpg or hqdefault.jpg. I believe all modern YouTube video should have hqdefault.jpg , but if this is not the case, you can change 'hq' above in the code to '', and it will fallback to default.jpg.

If you are comfortable with JavaScript, it is possible to expand the above code to check multiple image sizes to fall back to. I would recommend moving it to its own function in that case.

Common YouTube Video Thumbnail urls

In case hqdefault.jpg is not ideal, below are some of the other thumbnail urls:

  • https://img.youtube.com/vi/<video-id>/0.jpg
  • https://img.youtube.com/vi/<video-id>/1.jpg
  • https://img.youtube.com/vi/<video-id>/2.jpg
  • https://img.youtube.com/vi/<video-id>/3.jpg
  • https://img.youtube.com/vi/<video-id>/sddefault.jpg
  • https://img.youtube.com/vi/<video-id>/hqdefault.jpg
  • https://img.youtube.com/vi/<video-id>/mqdefault.jpg
  • https://img.youtube.com/vi/<video-id>/default.jpg

Related posts: