Monday, March 09, 2026
.video-title font-weight: 600; color: #e2e8f0; margin-bottom: 0.25rem; word-break: break-word;
/* download formats grid */ .formats-section margin-top: 1rem;
@media (max-width: 560px) .downloader-card padding: 1.5rem;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>VideoSwift - Online Video Downloader</title> <style> * margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; online video downloader
.format-info display: flex; flex-direction: column;
.brand p color: #9ca3af; margin-top: 0.5rem; font-size: 0.95rem;
// generate synthetic metadata based on URL domain / extension or random let title = "Awesome Video"; let duration = "03:24"; let thumbnail = null; .video-title font-weight: 600
.format-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.8rem;
if (videoUrl.includes("youtube") , 800); );
/* url input area */ .url-input-group background: #0f172a; border-radius: 2rem; border: 1px solid #1e293b; display: flex; flex-wrap: wrap; align-items: center; transition: all 0.2s; margin-bottom: 1.2rem; @media (max-width: 560px) .downloader-card padding: 1.5rem
try const videoMeta = await fetchVideoInfo(rawUrl); // build info panel html const thumbHtml = videoMeta.thumbnail ? `<img src="$videoMeta.thumbnail" alt="thumbnail" style="width:100%; height:100%; object-fit:cover;">` : `<span>🎬</span>`; infoPanel.innerHTML = ` <div class="video-meta"> <div class="thumb-placeholder"> $thumbHtml </div> <div class="video-details"> <div class="video-title">📹 $escapeHtml(videoMeta.title)</div> <div class="video-duration">⏱️ Duration: $videoMeta.duration</div> <div style="font-size:0.7rem; color:#5f7f9e; margin-top:4px;">🔗 source: $new URL(videoMeta.originalUrl).hostname</div> </div> </div> `; infoPanel.style.display = 'block';
/* header */ .brand text-align: center; margin-bottom: 2rem;
.url-input-group:focus-within border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
.file-type font-size: 0.7rem; color: #7e8aa2; text-transform: uppercase;
