YouTube Downloader

YouTube Video Downloader

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } .input-area { margin-bottom: 20px; } input[type="text"] { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 300px; } button { padding: 10px 15px; border: none; border-radius: 4px; background-color: #007bff; color: white; cursor: pointer; } button:hover { background-color: #0056b3; } #videoInfo { display: flex; flex-direction: column; align-items: center; margin-top: 20px; } .thumbnail-container { width: 320px; height: 180px; margin-bottom: 10px; } .thumbnail-container img { max-width: 100%; max-height: 100%; border-radius: 8px; } #downloadButton { margin-top: 10px; } #downloadButton:disabled { background-color: #ccc; cursor: default; } #downloadButton:disabled:hover { background-color: #ccc; } document.getElementById('fetchButton').addEventListener('click', fetchVideoInfo); document.getElementById('downloadButton').addEventListener('click', downloadVideo); async function fetchVideoInfo() { const videoLink = document.getElementById('videoLink').value; const videoId = getVideoId(videoLink); if (videoId) { const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`; const videoTitleElement = document.getElementById('videoTitle'); const thumbnailContainer = document.getElementById('thumbnailContainer'); const downloadButton = document.getElementById('downloadButton'); thumbnailContainer.innerHTML = ` YouTube Thumbnail

`; videoTitleElement.textContent = 'Video Title Placeholder'; // In a real app, fetch title downloadButton.disabled = false; } else { alert('Invalid YouTube link'); } } function getVideoId(url) { const videoIdRegex = /(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})/; const match = url.match(videoIdRegex); return match ? match[1] : false; } function downloadVideo() { const videoLink = document.getElementById('videoLink').value; const videoId = getVideoId(videoLink); if (videoId) { // In a real application, you would use a backend service // to fetch the actual download link and initiate the download. // For this example, we'll just open a placeholder download URL. const downloadUrl = `https://example.com/download?v=${videoId}`; // Replace with actual download logic window.open(downloadUrl, '_blank'); alert('Download functionality is a placeholder. In a real app, this would initiate a video download.'); } else { alert('Invalid video link or video ID not found.'); } }