DEV Community

loading...
Cover image for Create your own YouTube Video Downloader using Youtube_dl & Django

Create your own YouTube Video Downloader using Youtube_dl & Django

madhubankhatri profile image Madhuban Khatri ・2 min read

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 (5)

pic
Editor guide
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
saxers profile image
saxers

l am bad web developer. So I prefer to use different apps for downloading different youtube contents. Some guide for beginners spell on notmp3.com/blog/how-to-download-yo... and I can say that it works well in practice. I usually use such downloaders too.

Collapse
saxers profile image
saxers

thanks for guide

Collapse
banji220 profile image
Banji

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