Create your own YouTube Video Downloader using Youtube_dl & Django
Tags: youtube, django, python, javascript
Published: 2021-01-01 06:13:55

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.

{% youtube KHvQPzoCZzo %}

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
```python
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')
```

## app/urls.py
```python
from django.urls import path
from . import views

urlpatterns = [
	path('', views.home, name='home'),
	path('download/', views.download_video, name='download'),
]
```

## home.html
```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>
```
If you face any problem related to this post than comment below.

Thank you.