YouTube Thumbnail Not Loading
Paste the video link to see which thumbnail sizes actually exist for it. If an image opens here but breaks on your own site, the file is fine and the fix is on your side, as explained below.
Paste the video link to see which thumbnail sizes actually exist for it. If an image opens here but breaks on your own site, the file is fine and the fix is on your side, as explained below.
You put a YouTube thumbnail on your own page with an <img> tag pointing at YouTube's image server, and it came back as a broken image, a blank space, or a small gray box. This is a different problem from a thumbnail not showing on YouTube itself or in a link preview. Here the file address is yours to control, so the fix is almost always one of four things: the file does not exist for that video, YouTube returned a placeholder that looks like success, the URL is slightly wrong, or something in the browser blocked it. Work through them in order. Paste a link above to see exactly which sizes that video has.
Before touching your code, open the exact image URL on its own in a browser tab, or paste the video link into the box above. This splits the problem in two. If the image opens fine on its own but breaks inside your page, the file exists and the cause is your markup, your protocol, or a blocker, covered further down. If it fails on its own too, the specific file you asked for is missing for that video, which is the next section. Checking this first saves you from debugging markup when the real issue is a missing file.
The single most common reason a thumbnail will not load is code that hard-codes maxresdefault.jpg. That is the 1280x720 image, and YouTube only creates it when a video was uploaded at 720p or higher, or the creator set a custom thumbnail. For older or low-resolution videos it was never generated, so the URL returns a 404 or a blank. The image server, though, always stores these smaller sizes for every public video:
https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg 1280x720 (not always present)
https://i.ytimg.com/vi/VIDEO_ID/sddefault.jpg 640x480 (usually present)
https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg 480x360 (always present)The fix is a fallback chain: ask for maxresdefault, and if it fails, swap to sddefault, then hqdefault. In an <img> tag, an onerror handler that steps down through the sizes does this without any framework:
<img src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg"
onerror="this.onerror=null;this.src='https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg';"
alt="Video thumbnail">The thumbnail URL guide has the full list of stored files and a ready-made fallback function in JavaScript and Python, and the thumbnail size guide explains what each size is for.
There is a trap in the fallback approach. When a size does not exist, YouTube sometimes returns a 120x90 gray placeholder image with an HTTP 200 status rather than a clean 404. Because the request "succeeded", an onerror handler never fires and your fallback chain never runs, so you are left with a tiny gray square that looks broken. The way to catch it is to check the loaded image's real pixel width. If it came back 120 pixels wide or less, treat it as missing:
const img = new Image();
img.onload = () => {
if (img.naturalWidth <= 120) {
// placeholder, not the real thumbnail: try the next size
}
};
img.src = 'https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg';If every size, all the way down to hqdefault, comes back as that placeholder, the problem is the video and not your code: the video may be private, deleted, or otherwise without a public image. Which videos still have a thumbnail is covered in private, unlisted, and deleted video thumbnails.
If the file exists but still will not load, look closely at the address. A few specifics trip people up:
/vi/VIDEO_ID/NAME.jpg on i.ytimg.com (or the equivalent img.youtube.com/vi/...). A missing /vi/ segment or a typo in the filename returns nothing.& parameters pasted in. If you extracted the ID with a regex, log what you actually captured.http://, the browser blocks it as mixed content and the image never appears. Always use the https:// form.Not sure your extraction handles every link shape (watch, youtu.be, Shorts, embed, live)? The grabber above and the URL guide both parse all of them, so you can compare against a known-good result.
YouTube does not block hotlinking by referrer, so a thumbnail dropped into an <img> tag normally loads for everyone. When it loads for you but breaks for some visitors, the usual culprit is client-side: an ad blocker, a privacy extension, or a corporate or regional network filtering the i.ytimg.com domain along with the rest of Google's serving infrastructure. Test by disabling extensions briefly, or by opening the page in a private window with blockers off. You cannot fix another person's blocker, but you can make the image resilient by hosting your own copy, which the next section covers.
For a placement you care about, the most reliable answer is to not depend on the live YouTube URL at all. Fetch the thumbnail once, server-side, and store it on your own domain, then point your <img> at that copy. This removes every failure mode above in one move: a missing maxresdefault is resolved at fetch time instead of in the visitor's browser, no blocker can stop your own domain, and there is no mixed-content or placeholder surprise. It also fixes a separate developer headache: a ytimg image displays fine but cannot be drawn to a <canvas> and exported, because it is cross-origin and YouTube sends no CORS headers, so toDataURL throws a tainted-canvas error. A same-origin copy you host yourself draws and exports without complaint. If your goal is to place the image deliberately rather than debug it, see how to embed a YouTube thumbnail on your website, which walks through hotlinking versus hosting and the click-to-load approach.
If you have worked through all four causes and the image still will not load, isolate the variable. Try a second, well-known video such as a music video that definitely has a maxres image: if that one loads and yours does not, the file is missing for your specific video, so use the fallback chain. If neither loads on your page but both open fine in a standalone tab, the problem is in your page (protocol, markup, or a blocker), not in YouTube. And if the picture you get is real but soft rather than broken, that is a quality issue, not a loading one; see why a YouTube thumbnail looks blurry. To just grab the largest size a given video actually has, paste its link at the thumbnail grabber homepage.
The most common cause is requesting maxresdefault.jpg for a video that does not have it, which returns a 404 or a blank. Other causes are a mistyped URL or video ID, loading the image over http on an https page (blocked as mixed content), or an ad blocker stopping i.ytimg.com. Open the image URL directly in a tab: if it fails there too, the file is missing; if it works there but not in your page, the problem is your markup, protocol, or a blocker.
maxresdefault is the 1280x720 image, and YouTube only generates it for videos uploaded at 720p or higher, or where the creator set a custom thumbnail. For older or low-resolution videos it does not exist, so the URL returns a 404 or a gray placeholder. Fall back to sddefault.jpg (640x480) and then hqdefault.jpg (480x360), which every public video has.
When a requested size does not exist, YouTube can return a 120x90 gray placeholder with an HTTP 200 status instead of a 404, so a plain error check misses it. In code, read the image's naturalWidth after it loads: if it is 120 or smaller, treat it as missing and request the next size down. If every size returns the placeholder, the problem is the video itself, such as a private or deleted video.
No. The images on i.ytimg.com are served for direct embedding and do not block by referrer, so hotlinking one into an <img> tag works. If it fails only for some visitors, the usual reason is a browser ad blocker or privacy extension that blocks the ytimg domain, not YouTube refusing the request. For anything you control long term, hosting your own copy avoids both blockers and a missing file breaking your layout.
Displaying a ytimg image in an <img> tag always works, but drawing it to a <canvas> and then calling toDataURL or getImageData fails, because the image is cross-origin and YouTube does not send the CORS headers a canvas export needs. Adding crossorigin to the image makes it fail to load instead. The reliable fix is to fetch the image server-side and re-serve it from your own domain, then draw that same-origin copy to the canvas.
If it works for you but breaks for others, the difference is usually environment, not the file. Common cases are a hard-coded maxresdefault that exists for your test video but not for theirs, an ad blocker or content blocker on their device that stops i.ytimg.com, or a corporate or regional network that filters the domain. A size fallback chain and, for important placements, hosting your own copy make the image resilient across all of them.
Just need the largest image a video actually has? Paste the link above, or open the YouTube thumbnail grabber homepage.