DEV Community

Cover image for Create your own YouTube Video Downloader using Youtube_dl & Django
Madhuban Khatri
Madhuban Khatri

Posted on

Create your own YouTube Video Downloader using Youtube_dl & Django

Welcome to 2o2!,
Happy New Year to all. I hope this year u will reach your goals.

This is my first post of 2021 and in this post , I am creating a YouTube Video Downloader using Youtube_dl and Django.

You have to follow these basics steps:-

  • Create a Django Project
  • Create an App
  • Create a urls.py in app
  • Add your app in settings.py
  • Include app's urls.py to project'urls.py file

views.py

from django.shortcuts import render, redirect
from django.http import HttpResponse
import youtube_dl
from django.contrib import messages
# Create your views here.
def home(request):
    return render(request, 'home.html')



def download_video(request):
    if request.method == 'POST':
        video_url = request.POST['url']
        if video_url:
            ydl_opts = {'outtmp1': 'D:/'}
            with youtube_dl.YoutubeDL(ydl_opts) as ydl:
                ydl.download([video_url])
            messages.success(request, 'Video Downloaded.')
            return redirect('home')
        else:
            messages.warning(request, 'Please Enter Video URL')
            return redirect('home')
    return redirect('home')
Enter fullscreen mode Exit fullscreen mode

app/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('download/', views.download_video, name='download'),
]
Enter fullscreen mode Exit fullscreen mode

home.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>YouTube Video Downloader</title>

  </head>


  <body class="bg-dark text-danger">


    <div class="container" style="position: absolute; left: 100px;">
    <div class="container my-4" style="border:1px solid; background: black;">
      <h1>YouTube Video Downloader</h1>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <div class="container">
      <div class="mb-3">
        <form action="{% url 'download' %}" method="post">
          {% csrf_token %}
        <label for="exampleFormControlInput1" class="form-label"><b>Enter Video URL</b></label>
        <input type="text" class="form-control" name="url" id="url_name" placeholder="YouTube video URL">
        <br><br>
        <button type="submit" class="form-control btn btn-danger" id="btn">Download</button>
        </form>
      </div>

    </div>
    <div class="container w-25">
      {% if messages %}
      {% for message in messages %}
      <div class="alert alert-{{message.tags}} alert-dismissible fade show" role="alert">
        <strong>{{message}}</strong> 
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      {% endfor %}
      {% endif %}
      <p id="para_alert"></p>
    </div>
    </div>



    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

   <script type="text/javascript">
      var btn = document.getElementById('btn');
      var para = document.getElementById('para_alert');
      btn.addEventListener('click', function(){
        btn.innerHTML = '<button type="submit" class="btn btn-danger" type="submit" disabled><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Downloading...</button>';
      });


   </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

If you face any problem related to this post than comment below.

Thank you.

Latest comments (5)

Collapse
 
rahul5252 profile image
Rahul5252

ERROR: Unable to extract uploader id; please report this issue on yt-dl.org/bug . Make sure you are using the latest version; see yt-dl.org/update on how to update. Be sure to call youtube-dl with the --verbose flag and include its complete output.

Collapse
 
macaulayfamous profile image
Macaulayfamous

where did it get downloaded to ? cux i cant find vidoe

Collapse
 
aslasn profile image
Ande

you can write the language name after the three backticks to highlight code. For example, example markdown syntax highlight

<h1> Some nerdy html </h1>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madhubankhatri profile image
Madhuban Khatri

Thank u for info.
I will apply on this Post.

Collapse
 
banji220 profile image
Banji

gonna try it out, and I'll let ya know :)
Happy New Year ;) $
Happy Coding:)