Article last updated on:
February 10, 2024

You’re likely here because you:

  • Found a nice YouTube Thumbnail
  • And you want to inspect it
  • By checking out the HTML Source Code

This guide shows you the way. Join us!

How to find the Source Code of a YouTube Thumbnail

  1. Open the YouTube video with the thumbnail you’re interested in.
  2. Right-click anywhere on the video page and select “View Page Source”
    (or press Ctrl+U on Windows/Linux or Command+U on Mac).
  3. Search in page for “thumbnailUrl“. This will highlight the URL of the thumbnail image within the source code.
  4. Copy the URL and paste it into your browser to view the thumbnail directly.
Copying the URL of a YouTube Video Thumbnail in Element Inspector

Get the Thumbnail from Embed Code

Extract video ID from embed code, then use img.youtube.com/vi/ID/hqdefault.jpg (standard) or maxresdefault.jpg (high res) to get the thumbnail URL.

Let’s break thi sdown

1. Copy the video’s ID

  • Parse the embed code: Locate the src attribute within the iframe tag. It contains the video URL.
  • Extract the video ID: Copy the part of the URL between “watch?v=” and the next “&” or the end of the URL. This 11-character string is the video ID.

2. Add it in this URL

  • Standard definition: Use this format:
    https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg
  • High resolution (if available): Use: 
    https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg
  • Replace “VIDEO_ID” with the actual video ID you extracted.

3. JavaScript

For dynamic extraction on a website:

function getYouTubeThumbnail(embedCode) {
  const videoId = embedCode.match(/watch\?v=(.*?)(&|$)/)[1];
  return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
}

const thumbnailUrl = getYouTubeThumbnail(embedCode);
// Use the thumbnailUrl as needed

If the embed code is unavailable, use the video URL directly to get the thumbnail.

Important Note

Keep in mind that YouTube’s HTML structure can change, so these methods might not always work or require adjustments.

  • Respect copyright laws when using images you find online.
  • Only use thumbnails for fair use purposes or with the creator’s permission.

Conclusion

That’s right about it. All you need to know!


Thank you for reading this,
ThumbnailTest

About the author

David is the head of the editing team at ThumbnailTest. With his help, the editorial team is able to provide you with the best free guides related to YouTube thumbnails and A/B testing.