html css

YouTube Thumbnail Downloader Tool

CSS (styles.css): css Copy code body { font-family: Arial, sans-serif; background-color: #f3f3f3; margin: 0; padding: 0; } .container { max-width: 600px; margin: 50px auto; text-align: center; } h1 { color: #333; } .input-container { margin-bottom: 20px; } input[type="text"] { width: 80%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; margin-right: 10px; box-sizing: border-box; } button { padding: 10px 20px; border-radius: 5px; border: none; background-color: #3498db; color: #fff; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } #thumbnailResult { padding: 20px; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } JavaScript (script.js): javascript Copy code document.getElementById('downloadButton').addEventListener('click', () => { const videoUrl = document.getElementById('videoUrl').value; // Extract video ID from URL const videoId = getVideoIdFromUrl(videoUrl); if (videoId) { const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`; document.getElementById('thumbnailResult').innerHTML = ``; } else { document.getElementById('thumbnailResult').innerHTML = '

Please enter a valid YouTube video URL.

'; } }); // Function to extract video ID from YouTube video URL function getVideoIdFromUrl(url) { const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; const match = url.match(regExp); return (match && match[2].length === 11) ? match[2] : null; }