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.

Discussion (6)

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 Author

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

Collapse
macaulayfamous profile image
Macaulayfamous

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

Collapse
banji220 profile image
Banji

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