YouTube Thumbnail Downloader

YouTube URL or Video ID

Select size

:root { --bg: #0f1724; --card: #0b1220; --accent: #ff4d4f; --muted: #9aa4b2; --glass: rgba(255, 255, 255, 0.03); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #081021 0%, #071124 100%); color: #e6eef6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 880px; margin: 40px auto; padding: 24px; } h1 { margin: 0 0 18px 0; font-size: 24px; letter-spacing: -0.2px; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); padding: 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(2,6,23,0.6); } .label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; } .input, .select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: var(--glass); color: #e6eef6; font-size: 14px; outline: none; margin-bottom: 12px; } .row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .small { width: 150px; margin: 0; } .buttons { display: flex; gap: 10px; margin-top: 6px; } .btn { padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); background: transparent; color: #e6eef6; cursor: pointer; font-weight: 600; transition: transform 0.08s ease, opacity 0.08s ease; } .btn:hover { transform: translateY(-2px); } .btn.primary { background: linear-gradient(90deg, #ff6b6b, #ff4d4f); color: white; border: none; } .preview-area { margin-top: 18px; } .subtitle { margin: 12px 0; font-size: 18px; color: #dbe9ff; } .images-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .thumb-card { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 10px; text-align: center; border: 1px solid rgba(255,255,255,0.03); } .thumb-card img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 0 auto 8px auto; } .thumb-card button { margin-top: 6px; width: 100%; } .footer { margin-top: 18px; color: var(--muted); } .hidden { display: none; } @media (max-width: 520px) { .row { flex-direction: column; align-items: stretch; } .small { width: 100%; } } const videoInput = document.getElementById('videoInput'); const previewBtn = document.getElementById('previewBtn'); const downloadBtn = document.getElementById('downloadBtn'); const sizeSelect = document.getElementById('sizeSelect'); const previewArea = document.getElementById('previewArea'); const imagesGrid = document.getElementById('imagesGrid'); const previewAllBtn = document.getElementById('previewAllBtn'); // Common thumbnail size suffixes used by YouTube const THUMB_SIZES = [ 'maxresdefault', 'sddefault', 'hqdefault', 'mqdefault', 'default' ]; // Extract a YouTube video id from many common URL formats or return input if looks like id function extractVideoId(input) { if (!input) return null; input = input.trim(); // If input looks exactly like a 11-char id const idPattern = /^[A-Za-z0-9_-]{11}$/; if (idPattern.test(input)) return input; // Try to find id in common URL patterns // Examples: // https://www.youtube.com/watch?v=VIDEOID // https://youtu.be/VIDEOID // https://www.youtube.com/embed/VIDEOID try { // If input is a URL, parse it if (/^https?:\/\//i.test(input) || input.startsWith('www.')) { let url = input; if (!/^https?:\/\//i.test(url)) url = 'https://' + url; const u = new URL(url); // check query v= const v = u.searchParams.get('v'); if (v && idPattern.test(v)) return v; // path like /embed/VIDEOID or /shorts/VIDEOID or /watch/VIDEOID const parts = u.pathname.split('/').filter(Boolean); if (parts.length) { const possible = parts[parts.length - 1]; if (idPattern.test(possible)) return possible; } } } catch (e) { // ignore parse errors } // Try to find an 11-char id anywhere in the string const match = input.match(/[A-Za-z0-9_-]{11}/); return match ? match[0] : null; } // Build thumbnail URL for given video id and size suffix function buildThumbnailUrl(videoId, size) { return `https://i.ytimg.com/vi/${videoId}/${size}.jpg`; } // Show a single preview for selected size async function showPreview() { clearGrid(); const id = extractVideoId(videoInput.value); if (!id) { alert('Please enter a valid YouTube URL or video ID.'); return; } const size = sizeSelect.value || 'hqdefault'; const url = buildThumbnailUrl(id, size); previewArea.classList.remove('hidden'); const card = createThumbCard(url, size, id); imagesGrid.appendChild(card); } // Preview all common sizes function showAllPreviews() { clearGrid(); const id = extractVideoId(videoInput.value); if (!id) { alert('Please enter a valid YouTube URL or video ID.'); return; } previewArea.classList.remove('hidden'); THUMB_SIZES.forEach(size => { const url = buildThumbnailUrl(id, size); const card = createThumbCard(url, size, id); imagesGrid.appendChild(card); }); } // Create thumbnail card element with image and a download button function createThumbCard(url, sizeLabel, videoId) { const card = document.createElement('div'); card.className = 'thumb-card'; const img = document.createElement('img'); img.src = url; img.alt = `Thumbnail ${sizeLabel}`; img.loading = 'lazy'; img.onerror = () => { img.style.opacity = '0.35'; img.alt = 'Not available'; }; const label = document.createElement('div'); label.textContent = sizeLabel; label.style.fontSize = '13px'; label.style.color = '#cfe6ff'; label.style.marginBottom = '8px'; const btn = document.createElement('button'); btn.className = 'btn primary'; btn.textContent = 'Download'; btn.addEventListener('click', async () => { await downloadImage(url, `${videoId}_${sizeLabel}.jpg`); }); card.appendChild(img); card.appendChild(label); card.appendChild(btn); return card; } // Clear image grid function clearGrid() { imagesGrid.innerHTML = ''; } // Download image by fetching it as blob then saving async function downloadImage(url, filename) { try { // Fetch the image const res = await fetch(url, { mode: 'cors' }); if (!res.ok) { alert('Failed to fetch image. It may not exist for this video/size.'); return; } const blob = await res.blob(); const blobUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = blobUrl; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(blobUrl); } catch (err) { console.error(err); alert('An error occurred while downloading the image.'); } } // Download currently selected size async function downloadSelected() { const id = extractVideoId(videoInput.value); if (!id) { alert('Please enter a valid YouTube URL or video ID.'); return; } const size = sizeSelect.value || 'hqdefault'; const url = buildThumbnailUrl(id, size); await downloadImage(url, `${id}_${size}.jpg`); } // Attach event listeners previewBtn.addEventListener('click', (e) => { e.preventDefault(); showPreview(); }); previewAllBtn.addEventListener('click', (e) => { e.preventDefault(); showAllPreviews(); }); downloadBtn.addEventListener('click', (e) => { e.preventDefault(); downloadSelected(); }); // Keyboard: Enter to preview videoInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); showPreview(); } }); YouTube Thumbnail Downloader Usage: 1. Open index.html in your browser. 2. Paste a YouTube URL or video ID. 3. Choose a size and click Preview to view, or click Download to save the image.