| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>yt-dlp Deployment Guide</title> |
| <style> |
| :root { |
| --primary: #2563eb; |
| --bg: #f8fafc; |
| --card: #ffffff; |
| --text: #1e293b; |
| --code-bg: #1e1e1e; |
| } |
| body { |
| font-family: 'Inter', system-ui, sans-serif; |
| line-height: 1.6; |
| background-color: var(--bg); |
| color: var(--text); |
| margin: 0; |
| padding: 20px; |
| } |
| .container { |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| header { |
| text-align: center; |
| padding: 40px 0; |
| background: linear-gradient(135deg, #2563eb, #7c3aed); |
| color: white; |
| border-radius: 12px; |
| margin-bottom: 30px; |
| } |
| section { |
| background: var(--card); |
| padding: 25px; |
| border-radius: 12px; |
| box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); |
| margin-bottom: 20px; |
| } |
| h2 { border-left: 4px solid var(--primary); padding-left: 15px; color: var(--primary); } |
| pre { |
| background: var(--code-bg); |
| color: #dcdcdc; |
| padding: 15px; |
| border-radius: 8px; |
| overflow-x: auto; |
| font-size: 14px; |
| } |
| code { font-family: 'Fira Code', monospace; } |
| .badge { |
| display: inline-block; |
| background: #e2e8f0; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-size: 0.85em; |
| font-weight: bold; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| <header> |
| <h1>Universal Media Extraction Guide</h1> |
| <p>Mastering yt-dlp & FFmpeg for Web Deployment</p> |
| </header> |
|
|
| <section id="intro"> |
| <h2>1. What is yt-dlp?</h2> |
| <p>yt-dlp is a feature-rich command-line media downloader. It is a fork of the original youtube-dl project, optimized for higher speeds and better compatibility with modern streaming protocols like DASH and HLS.</p> |
| </section> |
|
|
| <section id="setup"> |
| <h2>2. Setting up on Hugging Face</h2> |
| <p>To run a yt-dlp website on the free tier, you need three files in your repository:</p> |
| <ul> |
| <li><strong>README.md:</strong> Set <code>sdk: gradio</code> and <code>python_version: 3.11</code>.</li> |
| <li><strong>packages.txt:</strong> Include <code>ffmpeg</code> to handle video/audio merging.</li> |
| <li><strong>requirements.txt:</strong> Include <code>yt-dlp</code> and <code>gradio</code>.</li> |
| </ul> |
| </section> |
|
|
| <section id="ffmpeg"> |
| <h2>3. The FFmpeg Backbone</h2> |
| <p>High-quality web video is often served as separate <strong>Video-only</strong> and <strong>Audio-only</strong> streams. Without FFmpeg, your app is limited to low-quality legacy formats (usually 720p or lower).</p> |
| |
| <p>FFmpeg acts as the "Muxer," joining these streams into a single MP4 or MKV file after the download is complete.</p> |
| </section> |
|
|
| <section id="code"> |
| <h2>4. Working Website Implementation</h2> |
| <p>Below is a production-ready <code>app.py</code> for a Hugging Face Space. It uses Gradio for the UI and yt-dlp for the backend.</p> |
| |
| <pre><code>import gradio as gr |
| import yt_dlp |
| import os |
|
|
| def download_video(url): |
| # Setup options with FFmpeg integration |
| ydl_opts = { |
| 'format': 'bestvideo+bestaudio/best', |
| 'outtmpl': 'downloads/%(title)s.%(ext)s', |
| # Ensure FFmpeg is used to merge streams |
| 'postprocessors': [{ |
| 'key': 'FFmpegVideoConvertor', |
| 'preferedformat': 'mp4', |
| }], |
| } |
| |
| with yt_dlp.YoutubeDL(ydl_opts) as ydl: |
| info = ydl.extract_info(url, download=True) |
| filename = ydl.prepare_filename(info).replace('.webm', '.mp4').replace('.mkv', '.mp4') |
| |
| return filename |
|
|
| # Gradio Interface |
| with gr.Blocks(theme=gr.themes.Soft()) as demo: |
| gr.Markdown("# 🚀 Private Video Downloader") |
| url_input = gr.Textbox(label="Paste Link (YouTube, TikTok, Instagram, etc.)") |
| btn = gr.Button("Fetch Video", variant="primary") |
| output_file = gr.File(label="Download Ready") |
|
|
| btn.click(fn=download_video, inputs=url_input, outputs=output_file) |
|
|
| demo.launch()</code></pre> |
| </section> |
|
|
| <footer> |
| <p style="text-align: center; color: #64748b; font-size: 0.8em;"> |
| Built for Hugging Face Free Tier • Uses yt-dlp Open Source |
| </p> |
| </footer> |
| </div> |
|
|
| </body> |
| </html> |
