YouTube Thumbnail Downloader — Paste a YouTube link to fetch thumbnails

Paste a YouTube link to fetch thumbnails

Instantly preview and download available thumbnails including high-resolution 4K when provided by the uploader.

No thumbnails yet

Paste a YouTube URL above to see thumbnails. Select a resolution and click Download to save.

About

Simple, privacy-first thumbnail previewer built with vanilla HTML, CSS and JavaScript. Accessible and responsive design.

:root { /* Theme & palette */ --bg: #0f1724; --card: rgba(255,255,255,0.04); --glass: rgba(255,255,255,0.06); --muted: rgba(255,255,255,0.7); --accent-start: #fff95b; --accent-end: #ff930f; --glass-border: rgba(255,255,255,0.06); --radius: 14px; /* Typography */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; /* Breakpoints */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1200px; /* Shadows and depth for neumorphism */ --shadow-dark: rgba(0,0,0,0.6); --shadow-light: rgba(255,255,255,0.03); /* UI sizes */ --container-max: 1300px; } /* Light theme */ [data-theme="light"] { --bg: #f7f8fb; --card: rgba(255,255,255,0.9); --glass: rgba(255,255,255,0.7); --muted: #333; --glass-border: rgba(0,0,0,0.05); --shadow-dark: rgba(10,10,10,0.06); --shadow-light: rgba(255,255,255,0.9); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: var(--font-sans); background: linear-gradient(180deg, rgba(255,147,15,0.05) 0%, rgba(255,249,91,0.02) 100%), var(--bg); color: var(--muted); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height: 1.4; font-size: 16px; } .container { width: 96%; max-width: var(--container-max); margin: 2.4rem auto; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } /* Header */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom: 1px solid var(--glass-border); padding: 0.6rem 0; } .header-inner { max-width: var(--container-max); margin: 0 auto; display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0 1rem; } .logo { display:flex; align-items:center; gap: 0.6rem; text-decoration: none; color: var(--muted); } .logo .site-title { font-weight: 700; letter-spacing: -0.02em; } .logo.small .site-title { font-size: 0.95rem; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; align-items: center; } .nav-link { color: var(--muted); text-decoration: none; padding: 0.5rem; border-radius: 8px; transition: background 180ms, color 180ms, transform 180ms; } .nav-link:hover, .nav-link:focus { background: linear-gradient(90deg, rgba(255,249,91,0.06), rgba(255,147,15,0.04)); transform: translateY(-2px); outline: none; } .header-actions { display:flex; align-items:center; } /* Hero */ .hero { padding: 1.2rem; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow: 0 8px 18px var(--shadow-dark), inset 4px 4px 8px var(--shadow-light); border: 1px solid var(--glass-border); display: grid; gap: 1rem; } h1 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.2rem); color: var(--muted); } .lead { margin: 0; color: var(--muted); opacity: 0.9; } /* Form */ .url-form { display:flex; gap: 0.6rem; align-items: center; width: 100%; } .input-group { display:flex; flex:1; gap: 0.6rem; } input[type="url"] { flex:1; border: none; padding: 0.9rem 1rem; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color: var(--muted); box-shadow: 6px 6px 16px rgba(0,0,0,0.45), -6px -6px 16px rgba(255,255,255,0.02); transition: box-shadow 200ms, transform 150ms, border 120ms; outline: none; } input[type="url"]::placeholder { color: rgba(255,255,255,0.45); } input[type="url"]:focus { box-shadow: 0 0 18px rgba(255,147,15,0.18), inset 0 0 6px rgba(255,249,91,0.02); transform: translateY(-1px); } .btn { display:inline-flex; align-items:center; justify-content:center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 10px; border: 1px solid transparent; background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); color: #111; font-weight: 600; cursor: pointer; transition: transform 160ms, box-shadow 160ms, opacity 120ms; } .btn.primary { min-width: 160px; } .btn.secondary { background: transparent; border: 1px solid var(--glass-border); color: var(--muted); } .btn.ghost { background: transparent; border: 1px dashed var(--glass-border); color: var(--muted); padding: 0.45rem 0.7rem; } .btn:hover, .btn:focus { transform: translateY(-3px); outline: none; } .form-meta { display:flex; justify-content:space-between; align-items:center; gap: 1rem; margin-top: 0.6rem; width:100%; } .hint { color: rgba(255,255,255,0.65); font-size: 0.95rem; } .error { color: #ffb4b4; font-weight: 600; } /* Loader */ .loader { display:flex; gap:0.8rem; align-items:center; margin-top: 0.6rem; } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.08); border-top-color: var(--accent-end); animation: spin 900ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Previews */ .previews { display:grid; gap:1rem; grid-template-columns: 1fr; } .empty-state { padding: 2rem; border-radius: 12px; background: var(--card); border: 1px solid var(--glass-border); text-align: center; } .thumb-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; } .thumb-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 10px; padding: 0.6rem; border: 1px solid var(--glass-border); display:flex; flex-direction:column; gap: 0.6rem; transition: transform 220ms, box-shadow 220ms, opacity 220ms; will-change: transform; overflow: hidden; } .thumb-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 12px 30px rgba(0,0,0,0.5); } .thumb-media { width: 100%; height: 0; padding-bottom: 56%; position: relative; border-radius: 8px; overflow: hidden; background: linear-gradient(90deg, rgba(255,249,91,0.02), rgba(255,147,15,0.02)); } .thumb-media img { position:absolute; inset: 0; width:100%; height:100%; object-fit: cover; display:block; transition: transform 300ms ease; } .thumb-media img:hover { transform: scale(1.06); } .thumb-meta { display:flex; justify-content:space-between; align-items:center; gap: 0.5rem; font-size: 0.95rem; } .res-label { font-weight: 700; background: linear-gradient(90deg, rgba(255,249,91,0.06), rgba(255,147,15,0.04)); padding: 0.2rem 0.5rem; border-radius: 6px; } .thumb-actions { display:flex; gap: 0.6rem; align-items:center; } .small { font-size: 0.9rem; } /* Toast */ .toast { position: fixed; right: 1rem; bottom: 1.2rem; background: linear-gradient(90deg, rgba(255,249,91,0.06), rgba(255,147,15,0.04)); padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid var(--glass-border); box-shadow: 0 8px 20px rgba(0,0,0,0.35); color: var(--muted); } /* Footer */ .site-footer { margin-top: 2.8rem; padding: 1.4rem; border-top: 1px solid var(--glass-border); } .footer-inner { max-width: var(--container-max); margin: 0 auto; display:grid; grid-template-columns: 1fr; gap: 1rem; padding: 0 1rem; } .footer-col h4 { margin: 0 0 0.6rem 0; } .footer-col p, .footer-col ul { margin: 0; } .footer-bottom { text-align:center; margin-top: 0.8rem; color: rgba(255,255,255,0.6); } .socials { display:flex; gap:0.6rem; margin-top:0.6rem; } .social { color: var(--muted); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; } /* Accessibility helpers */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Animations */ .fade-in { animation: fadeSlide 900ms ease both; } @keyframes fadeSlide { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (min-width: 900px) { .container { grid-template-columns: 1fr 360px; } .previews { grid-column: 1 / 2; } .how { grid-column: 2 / 3; position: sticky; top: 88px; } .footer-inner { grid-template-columns: 1fr 220px 220px; } } @media (max-width: 600px) { input[type="url"] { font-size: 0.95rem; } .btn.primary { min-width: 120px; } .header-inner { padding: 0 0.6rem; } } /* Utility */ .muted { color: rgba(255,255,255,0.7); } .small-note { font-size: 0.85rem; opacity: 0.8; } // app.js // Client-side logic for YouTube Thumbnail Downloader // Author: Jit (example) // Purpose: // - Parse YouTube URLs (various formats) to extract video ID // - Build thumbnail URLs using common YouTube endpoint patterns // - Check availability of thumbnails via Image onload/onerror // - Present previews and allow downloads (attempt blob fetch, fallback to opening image) // - Client-only; no data sent to external servers (except requests directly to img.youtube.com by the browser when fetching images) (function () { 'use strict'; // DOM refs const form = document.getElementById('urlForm'); const input = document.getElementById('youtubeUrl'); const errorEl = document.getElementById('formError'); const loader = document.getElementById('loader'); const previews = document.getElementById('previews'); const emptyState = document.getElementById('emptyState'); const downloadAllBtn = document.getElementById('downloadAll'); const copyAllBtn = document.getElementById('copyAllLinks'); const toast = document.getElementById('toast'); const themeToggle = document.getElementById('themeToggle'); const yearSpan = document.getElementById('year'); // Setup year if (yearSpan) yearSpan.textContent = new Date().getFullYear(); // Thumbnail patterns to test (ordered: highest-first) const thumbPatterns = [ { key: 'maxresdefault', label: '4K (maxres)', filename: 'maxresdefault.jpg', ideal: true }, { key: 'hqdefault', label: 'HQ (1280x720)', filename: 'hqdefault.jpg', ideal: true }, { key: 'sddefault', label: 'SD (640x480)', filename: 'sddefault.jpg', ideal: true }, { key: 'mqdefault', label: 'MQ (320x180)', filename: 'mqdefault.jpg', ideal: false }, { key: 'default', label: 'Default (120x90)', filename: 'default.jpg', ideal: false } ]; // State let currentVideoId = null; let availableThumbs = []; // {key, label, url, available, sizeBytes} // Helper: show an accessible toast function showToast(message, timeout = 3500) { toast.textContent = message; toast.hidden = false; setTimeout(() => { toast.hidden = true; }, timeout); } // Helper: set error function setError(message) { errorEl.textContent = message; errorEl.hidden = false; } function clearError() { errorEl.textContent = ''; errorEl.hidden = true; } // Helper: show loader function showLoader() { loader.hidden = false; loader.setAttribute('aria-hidden', 'false'); } function hideLoader() { loader.hidden = true; loader.setAttribute('aria-hidden', 'true'); } // Robust YouTube ID extraction // Supports: // - https://www.youtube.com/watch?v=VIDEOID // - https://youtu.be/VIDEOID // - https://www.youtube.com/shorts/VIDEOID // - also accepts just the VIDEOID function extractYouTubeID(urlOrId) { if (!urlOrId) return null; const trimmed = urlOrId.trim(); // If just ID (11+ chars), return directly // YouTube IDs are 11 characters, but to be flexible, accept 9-20 alphanum-_. const idOnly = /^[A-Za-z0-9_-]{9,20}$/; if (idOnly.test(trimmed)) return trimmed; try { // Attempt to parse as URL const url = new URL(trimmed, window.location.href); // Hostnames to consider const host = url.hostname.toLowerCase(); if (host.includes('youtube.com') || host.includes('youtu.be')) { // Check various path patterns // 1) youtu.be/VIDEOID if (host.includes('youtu.be')) { const p = url.pathname.split('/').filter(Boolean); if (p.length) return p[0]; } // 2) youtube.com/watch?v=VIDEOID if (url.searchParams.has('v')) { return url.searchParams.get('v').split('&')[0]; } // 3) youtube.com/shorts/VIDEOID const pathParts = url.pathname.split('/').filter(Boolean); const shortsIndex = pathParts.indexOf('shorts'); if (shortsIndex !== -1 && pathParts.length > shortsIndex + 1) { return pathParts[shortsIndex + 1]; } // 4) embed/VIDEOID const embedIndex = pathParts.indexOf('embed'); if (embedIndex !== -1 && pathParts.length > embedIndex + 1) { return pathParts[embedIndex + 1]; } } // Fallback: try to find v= in fragment or search const q = url.hash || url.search; const m = q.match(/v=([A-Za-z0-9_-]{9,20})/); if (m) return m[1]; } catch (e) { // Not a URL. Possibly just bad string. } return null; } // Build thumbnail URLs function buildThumbUrls(videoId) { const base = `https://img.youtube.com/vi/${videoId}/`; return thumbPatterns.map(p => ({ key: p.key, label: p.label, url: base + p.filename })); } // Check image availability using Image() object. // Returns a Promise resolving to {url, ok} function checkImage(url, timeout = 8000) { return new Promise((resolve) => { const img = new Image(); let done = false; function finish(ok) { if (done) return; done = true; // Best-effort to stop loading img.onload = img.onerror = null; try { img.src = ''; } catch (e) {} resolve({ url, ok }); } img.onload = () => finish(true); img.onerror = () => finish(false); // Some browsers may block cross-origin image loads in specific contexts; // we still rely on onerror/onload to infer presence. img.src = url + (url.includes('?') ? '&' : '?') + 'cachebust=' + Date.now(); setTimeout(() => finish(false), timeout); }); } // Attempt to fetch HEAD to get content-length (file size). // Note: Many YouTube image hosts do not expose CORS headers for HEAD requests, // so this may be blocked by the browser. We gracefully handle failures. async function getContentLength(url) { try { const res = await fetch(url, { method: 'HEAD' }); if (res.ok) { const len = res.headers.get('content-length'); if (len) return parseInt(len, 10); } } catch (e) { // CORS or network error; ignore and return null } return null; } // Format bytes function formatBytes(bytes) { if (!bytes || bytes <= 0) return 'Unknown size'; const units = ['B', 'KB', 'MB', 'GB']; let i = 0; let n = bytes; while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; } return `${n.toFixed(n >= 100 ? 0 : 1)} ${units[i]}`; } // Render thumbnails grid function renderThumbnails(list) { // Clear existing previews.innerHTML = ''; if (!list || !list.length) { previews.appendChild(emptyState); return; } const grid = document.createElement('div'); grid.className = 'thumb-grid'; list.forEach(item => { const card = document.createElement('article'); card.className = 'thumb-card'; card.setAttribute('tabindex', '0'); card.setAttribute('aria-label', `${item.label} thumbnail`); // Media const media = document.createElement('div'); media.className = 'thumb-media'; // Lazy-loaded image const img = document.createElement('img'); img.loading = 'lazy'; img.alt = `${item.label} thumbnail for video ${currentVideoId}`; img.src = item.url; // Use dataset to mark available or not if (!item.available) { img.style.filter = 'grayscale(80%) opacity(0.6)'; img.alt = `${item.label} not available`; } media.appendChild(img); // Meta row const meta = document.createElement('div'); meta.className = 'thumb-meta'; const left = document.createElement('div'); left.innerHTML = `

${item.label}

${item.available ? formatBytes(item.sizeBytes) : 'Not available'}

`; const actions = document.createElement('div'); actions.className = 'thumb-actions'; // Preview button (opens in new tab) const previewBtn = document.createElement('a'); previewBtn.href = item.url; previewBtn.target = '_blank'; previewBtn.rel = 'noopener noreferrer'; previewBtn.className = 'btn ghost small'; previewBtn.textContent = 'Open'; previewBtn.title = 'Open full image in a new tab'; previewBtn.setAttribute('aria-label', `Open ${item.label} in a new tab`); // Copy link button const copyBtn = document.createElement('button'); copyBtn.type = 'button'; copyBtn.className = 'btn ghost small'; copyBtn.textContent = 'Copy link'; copyBtn.title = 'Copy direct image link'; copyBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(item.url); showToast('Image link copied to clipboard'); } catch (e) { showToast('Could not copy link'); } }); // Download button const dlBtn = document.createElement('button'); dlBtn.type = 'button'; dlBtn.className = 'btn secondary small'; dlBtn.textContent = 'Download'; dlBtn.disabled = !item.available; dlBtn.title = item.available ? `Download ${item.label}` : `${item.label} not available`; dlBtn.setAttribute('aria-disabled', String(!item.available)); dlBtn.addEventListener('click', async () => { await downloadImage(item); }); actions.appendChild(previewBtn); actions.appendChild(copyBtn); actions.appendChild(dlBtn); meta.appendChild(left); meta.appendChild(actions); card.appendChild(media); card.appendChild(meta); grid.appendChild(card); }); previews.appendChild(grid); } // Attempt to download an image by fetching as blob first. // If fetch blocked by CORS, fallback to opening URL in new tab. async function downloadImage(item) { // Micro-interaction: disable button, show progress showToast(`Starting download: ${item.label}`); // Try to fetch blob try { const res = await fetch(item.url, { mode: 'cors' }); if (!res.ok) { // If 403/404 etc., fallback throw new Error('Network response not ok'); } const blob = await res.blob(); const blobUrl = URL.createObjectURL(blob); triggerAnchorDownload(blobUrl, `${currentVideoId}_${item.key}.jpg`); // Revoke after short delay setTimeout(() => URL.revokeObjectURL(blobUrl), 15000); showToast(`Download started: ${item.label}`); } catch (err) { // Likely CORS or blocked. Fallback: open image in new tab. showToast('Direct download blocked. Opening image for manual save.'); window.open(item.url, '_blank', 'noopener'); } } function triggerAnchorDownload(url, filename) { const a = document.createElement('a'); a.href = url; a.download = filename; a.style.display = 'none'; document.body.appendChild(a); a.click(); a.remove(); } // Download all available thumbnails sequentially async function downloadAllSequential(list) { const available = list.filter(i => i.available); if (!available.length) { showToast('No thumbnails available to download'); return; } for (const item of available) { // small delay to avoid overwhelming the browser // and give user visible progress // eslint-disable-next-line no-await-in-loop await downloadImage(item); // eslint-disable-next-line no-await-in-loop await new Promise(r => setTimeout(r, 600)); } showToast('All downloads attempted'); } // Copy all direct links to clipboard async function copyAllLinks(list) { const links = list.filter(i => i.available).map(i => i.url); if (!links.length) { showToast('No available links to copy'); return; } try { await navigator.clipboard.writeText(links.join('\n')); showToast('All image links copied'); } catch (e) { showToast('Could not copy links to clipboard'); } } // Main handler: on form submit form.addEventListener('submit', async (ev) => { ev.preventDefault(); clearError(); const value = input.value; const id = extractYouTubeID(value); if (!id) { setError('Please enter a valid YouTube link or video ID.'); return; } currentVideoId = id; await fetchThumbnailsFor(id); }); // Drag & drop support for URLs window.addEventListener('dragover', (ev) => { ev.preventDefault(); }); window.addEventListener('drop', async (ev) => { ev.preventDefault(); const text = ev.dataTransfer.getData('text/plain') || ''; if (!text) return; input.value = text.trim(); const id = extractYouTubeID(text); if (!id) { setError('Dropped content does not contain a valid YouTube link or ID.'); return; } clearError(); currentVideoId = id; await fetchThumbnailsFor(id); }); // Theme toggle simple implementation themeToggle.addEventListener('click', () => { const isLight = document.documentElement.getAttribute('data-theme') === 'light'; if (isLight) { document.documentElement.removeAttribute('data-theme'); themeToggle.setAttribute('aria-pressed', 'false'); } else { document.documentElement.setAttribute('data-theme', 'light'); themeToggle.setAttribute('aria-pressed', 'true'); } }); // Fetch and detect thumbnails async function fetchThumbnailsFor(videoId) { showLoader(); emptyState.remove(); availableThumbs = []; const candidates = buildThumbUrls(videoId); // Check each candidate image const checks = await Promise.all(candidates.map(c => checkImage(c.url))); // For each available, try to get content-length (best-effort) const results = await Promise.all(checks.map(async (c) => { let size = null; if (c.ok) { size = await getContentLength(c.url); // may be null if CORS blocks } return { url: c.url, key: (new URL(c.url)).pathname.split('/').pop().replace('.jpg', ''), available: c.ok, sizeBytes: size, label: thumbPatterns.find(t => c.url.includes(t.filename))?.label || 'Thumbnail' }; })); // Save state availableThumbs = results; // Update UI hideLoader(); renderThumbnails(availableThumbs); // Update controls const anyAvailable = availableThumbs.some(i => i.available); downloadAllBtn.disabled = !anyAvailable; copyAllBtn.disabled = !anyAvailable; // If maxresdefault missing -> notify user via toast, and mark in UI const maxres = availableThumbs.find(t => t.key === 'maxresdefault'); if (maxres && !maxres.available) { showToast('4K thumbnail not available for this video'); } // Smoothly animate thumbnail cards in document.querySelectorAll('.thumb-card').forEach((el, i) => { el.style.opacity = '0'; el.style.transform = 'translateY(8px)'; setTimeout(() => { el.style.transition = 'opacity 400ms ease, transform 400ms ease'; el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, i * 80); }); } // Download all button handler downloadAllBtn.addEventListener('click', async () => { if (!currentVideoId) return; await downloadAllSequential(availableThumbs); }); copyAllBtn.addEventListener('click', async () => { await copyAllLinks(availableThumbs); }); // Allow pressing Enter in input to submit (form handler covers this) input.addEventListener('keydown', (ev) => { if (ev.key === 'Enter') { ev.preventDefault(); form.requestSubmit(); } }); // Optional: minimal analytics placeholder // To integrate analytics, add script here, respecting privacy. // Example (commented out): // (function(){ // // Analytics placeholder - no tracking by default // })(); // Accessibility: ensure focus styles visible document.addEventListener('keyup', (e) => { if (e.key === 'Tab') document.body.classList.add('show-focus'); }); // On load: a small welcome hint for keyboard users window.addEventListener('load', () => { setTimeout(() => { // Subtle initial animation document.querySelectorAll('.fade-in').forEach(el => el.style.opacity = 1); }, 600); }); })();