YouTube Thumbnail Downloader

YoutubeThumbnailDownloader.jsx parses a string into a video ID, then getThumbnailVariants builds five HTTPS URLs on i.ytimg.com. The workspace shows those JPGs in <img> tags, probes them with new Image(), and can window.open the selected image URL or https://www.youtube.com/watch?v={id}. Deriving or displaying a thumbnail does not verify ownership, permission, licensing, attribution requirements, destination validity, or that reuse is allowed.

Raw ID

After trim, /^[a-zA-Z0-9_-]{11}$/. Any other length or character fails this branch.

youtu.be hosts

hostname.includes("youtu.be"). ID is pathname.replace("/", "").trim() if that string is a valid 11-character ID.

youtube.com hosts

hostname.includes("youtube.com") (www.youtube.com and m.youtube.com are the same substring test). First searchParams.get("v"), else the last non-empty path segment, each checked against the same 11-character regex.

URL parse

new URL(value). Strings without a parseable URL that are not already a raw ID return "" from extractVideoId.

Not implemented

No playlist, channel, or title lookup. Those strings work only if a valid ID still comes out of v or the last path segment.

THUMBNAIL_TYPES is Max Resolution maxresdefault.jpg (stated 1280×720), Standard Definition sddefault.jpg (640×480), High Quality hqdefault.jpg (480×360), Medium Quality mqdefault.jpg (320×180), and Default default.jpg (120×90). buildThumbnailUrl concatenates https://i.ytimg.com/vi/{videoId}/{file}. sizeLabel is width×height from those constants, not measured file metadata for every response.

Load thumbnails sets loadedVideoId and selectedId to "maxres". A useEffect then probes every variant. getDefaultThumbnailId walks maxres, sd, hq, mq, default and keeps the first id whose availability is not false. The hero <img src={selected.url}> loads from the CDN unless that id is marked unavailable. Grid tiles use loading="lazy".

Probe onerror sets available false. isPlaceholderThumbnail applies only when thumbnailId is maxres: naturalWidth ≤ 120 or naturalHeight ≤ 90 counts as unavailable. Other sizes are not placeholder-tested. The hero then shows “Not available at this size” and “Try Standard or High Quality instead.” Grid tiles show Unavailable and an N/A badge instead of the image. Until probes finish, availability is {} so !== false is true and all five still count in Available. A failed image load is not classified as private, deleted, restricted, or missing-size.

There is no <a download>, no Blob, and no filename assigned in this page. Open image is window.open of selected.url. Copy image URL writes that URL. Copy full summary writes formatThumbnailSummary: Video ID, Watch URL, Thumbnail label, Size, Image URL. Clipboard failure clears the Copied state with no extra error string. Open YouTube video opens buildWatchUrl. The sidebar heading “Download summary” is that metadata card (ID, selected label, stated size, file name, available count, Format JPG)—not a file writer.

1. Idle: Video link heading “Paste a YouTube URL or 11-character ID”, placeholder “https://www.youtube.com/watch?v=… or youtu.be/…”, Load thumbnails. Size chips list Max Resolution, Standard Definition, High Quality, Medium Quality, Default. There is no example-URL control.
2. Click Load thumbnails or press Enter. Empty → “Please paste a YouTube video URL or video ID.” Unparseable → “Unable to detect a valid YouTube video ID.” A valid parse can show Detected ID before load; images wait until load.
3. After load, click a tile under All thumbnail sizes. Preview heading is Preview. Open video (beside All thumbnail sizes) opens buildWatchUrl. Unavailable tiles show Unavailable and N/A; the hero can show “Not available at this size.”
4. Click Open image (window.open selected.url), Copy image URL (URL copied), Copy full summary (Summary copied), Open YouTube video, or Load another video. FileWorkflowShell Start over (workspace active) also runs handleClearAll.

The constructed resources are the five JPG names above. These files do not request a video stream, audio, captions, a channel banner, or playlist data. Open YouTube video only opens the watch URL in a new tab. Load thumbnails does not mean a video file was retrieved.

The header keeps this notice: “A loaded thumbnail is not ownership, copyright clearance, or permission to reuse the image. Confirm the creator’s rights before republishing.” The idle panel adds that a reachable JPG is not permission to reuse it. FileWorkflowShell privacyNote includes “Not a reuse license.” This article does not add a license, fair-use conclusion, or permission grant. Confirm rights before republishing; this page does not do that check.

Parsing stays in extractVideoId. Previewing sets img.src and Image.src to the i.ytimg.com URLs, so the browser requests those URLs (path includes the extracted video ID and file name). Opening the image or watch URL navigates to i.ytimg.com or youtube.com in a new tab. YoutubeThumbnailDownloader.jsx does not POST the pasted URL or video ID to a DevToolKit thumbnail API. It does call trackToolEvent("tool_started", { tool: TOOL_SLUG }) on the first successful load until clear, and trackToolEvent("tool_success", { tool, thumbnailCount: variants.length }) once per loaded workspace. trackToolEvent may navigator.sendBeacon or fetch POST /api/stats/track. thumbnailCount is the THUMBNAIL_TYPES length (5), not availableCount. Ordinary site assets can still load. Refresh and handleClearAll drop React state; there is no localStorage key in this file.

• That the video exists, is public, is playable, or belongs to the person who pasted the link.
• Titles, channel names, duration, captions, or other YouTube metadata (no Data API call in these files).
• That Max Resolution will load. The page itself says max resolution is not guaranteed for every video.
• That stated width×height match the bytes YouTube returns, except the maxres placeholder test (≤120×90).
• Ownership, copyright clearance, attribution, or permission to republish.
• A file saved into this app with a chosen filename.

• Confirm extractVideoId produced the ID you intended (Detected ID / summary Video ID).
• If a size is N/A, treat that as this probe’s Image onload/onerror (and maxres placeholder) result, not a privacy-status API.
• Open image only opens the CDN URL; saving is the browser’s, not a Blob from this page.
• Re-read the on-page rights lines before republishing. Reachable is not a reuse license.
• If you need compression or resizing, save a file yourself, then upload it on Image Compressor or Image Resizer—this workspace does not pass the JPG into those tools.

• Image Compressor — when you already have a JPG/PNG/WebP/AVIF file to run through compressImageInBrowser. This page only links i.ytimg.com URLs.
• Image Resizer — when you already have a JPG/PNG/WebP file to run through resizeImageInBrowser. This page does not resize the CDN image in place.