Embed a YouTube Thumbnail in HTML and JavaScript

Once you have a video ID you can show its thumbnail anywhere. Here are the short snippets, plus the one trick that prevents broken images.

Plain HTML

<img src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg" alt="Video title" width="1280" height="720">

Markdown

![Video title](https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg)

JavaScript with a fallback

The 1280×720 file is missing for some videos, so a robust page tries it first and falls back to the 480×360 file, which exists for every video:

const img = new Image();
img.src = "https://i.ytimg.com/vi/" + id + "/maxresdefault.jpg";
img.onerror = () => { img.src = "https://i.ytimg.com/vi/" + id + "/hqdefault.jpg"; };

One more detail: when a video has no maxresdefault, some setups get a small gray placeholder instead of an error. Compare img.naturalWidth with 120 after loading and treat a very small result as missing.

Check before you hard-code

If you only need the image for a single video, it is quicker to paste the link into the tool on the get YouTube thumbnail from URL page, copy the direct image URL it shows for the size that exists, and skip the guesswork. Note that thumbnails belong to their creators, so check the reuse rules before you publish one.

Accessibility and SEO of an embedded thumbnail

An image that carries information should have a descriptive alt text, and a thumbnail that links to a video should say where it leads. Use the video title as the alt text, keep the file lightweight by choosing the size you actually need and avoid stretching a small file to a large box, which makes it look blurry.

Performance and layout tips

Set width and height on the image so the page does not jump while it loads.
Add loading="lazy" to images below the fold.
Write a meaningful alt text, such as the video title.

Link the thumbnail to the video

A thumbnail is most useful as a clickable preview. Wrap the image in a link to https://www.youtube.com/watch?v=VIDEO_ID so visitors can open the video with one click.

Frequently asked questions

How do I show a YouTube thumbnail in HTML?

Use an img tag whose src is https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg, with width, height and alt attributes.

What if the maxresdefault image does not load?

Fall back to hqdefault.jpg, which exists for every video, using the image's error event.

Can I use a thumbnail in Markdown?

Yes, with the standard image syntax and the same address.

Is it allowed to hotlink the image?

The addresses are public, but the image belongs to its creator, so check the rules before you publish it.

Is there a faster way for one video?

Yes. Paste the link into ThumbGrab and copy the direct image URL it shows for the size you want.

Keep reading

Next guide: How to copy a YouTube thumbnail URL
The tool for this topic: get a YouTube thumbnail from a URL
Back to the thumbgrabpro.pages.dev