YouTube Thumbnail Downloader

body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); max-width: 600px; width: 100%; } h1 { color: #007bff; } .url-input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } .btn { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; } .thumbnail-container { margin-top: 20px; } .thumbnail { max-width: 100%; height: auto; display: none; } const youtubeURLInput = document.getElementById("youtubeURL"); const downloadButton = document.getElementById("downloadButton"); const thumbnailImage = document.getElementById("thumbnailImage"); downloadButton.addEventListener("click", () => { const youtubeURL = youtubeURLInput.value; if (isValidYouTubeURL(youtubeURL)) { const videoID = extractVideoID(youtubeURL); const thumbnailURL = `https://img.youtube.com/vi/${videoID}/maxresdefault.jpg`; thumbnailImage.src = thumbnailURL; thumbnailImage.style.display = "block"; } else { alert("Please enter a valid YouTube video URL."); } }); function isValidYouTubeURL(url) { const pattern = /^(https?:\/\/)?(www\.)?youtube\.com\/watch\?v=.{11}$/; return pattern.test(url); } function extractVideoID(url) { const matches = url.match(/(v=|\/)([a-zA-Z0-9_-]{11})/); return matches ? matches[2] : null; }