How to Create YouTube Video Download using JavaScript and Node.js

Editor

6 months ago

YouTube Video Download is against the YouTube Policy. The only videos that your allowed to download is your own which you can already do using YouTube Studio.

Making a YouTube Downloader can look really difficult, but it is not really. Making a YouTube Downloader requires you to know some HTML, JavaScript and Node.js and you should be well enough able to create your very own YouTube downloader.

HTML for YouTube Video Download

To create a YouTube downloader, you’ll need HTML to design the interactive elements for your website. Start by creating a basic HTML document with a title, an input field, and a button. Name this file index.html. Here’s the HTML code for our simple webpage:

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Downloader</title>
</head>
<body>
    <h1 class="heading">My Own YouTube Downloader !</h1>
    <input class="URL-input" placeholder="Video URL e.g. https://www.youtube.com/watch?v=MtN1YnoL46Q">
    <button class="convert-button">Convert</button>
</body>
</html>

CSS

Next, we’ll add some styling to our page using CSS. You can use CSS frameworks like Bootstrap or Bulma, but for this example, we’ll write custom CSS. First, link your CSS file (style.css) by adding the following link tag inside the <head> of your HTML:

<link rel="stylesheet" href="style.css">

Now, let’s create our style.css file with some simple styles

* {
    text-align: center;
}
.heading {
    font-family: Arial;
    margin-top:40vh;
}
.URL-input, .convert-button {
    font-size:1.3em;
    padding:5px 10px;
}
.URL-input {
    border-radius:4px 0px 0px 4px;
    width:30em;
    text-align: left;
    border:2px solid #EEEEEE;
    background: #EEEEEE;
    outline:none;
}
.URL-input:focus {
    border:2px solid #0485ff;
}
.convert-button {
    border-radius:0px 4px 4px 0px;
    border:2px solid #0485ff;
    background: #0485ff;
    color:white;
}

This CSS will center-align all elements, style the heading, and apply specific styles to the input and button to create a cohesive and simple user interface.

JavaScript and Node.js

Now, we need to set up our JavaScript and Node.js server. First, create a JavaScript file named script.js. Then, link this file to your HTML by adding script tags at the bottom of the HTML file (this is very important).

<script src='script.js'></script>

In out script.js file we are going to write that little piece of code output to the console the value of the input. We are doing that to check that everything is working.

var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
    console.log(`URL: ${URLinput.value}`);
    sendURL(URLinput.value);
});
function sendURL(URL) {
    // We will put code here later
}

The function sendURL() will send the URL to our server. Now we are going to start writing code for our Server using Node.js. First, we are going to create a folder called Server then create a file called index.js inside the Server folder. This will have the code for the server to run. After creating the file, we need to run this command in the command line or terminal in the Server folder:

npm init

You will be asked a series of questions about the project. All the default responses would be fine. After that we are going to install some packages that we are going to use.

Type the command below to install the required packages which are express, ytdl-core and cors

npm install express cors ytdl-core

To setup our server we need to type some code inside the index.js file. We need to require the packages and setup the server:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.listen(4000, () => {
    console.log('Server Works !!! At port 4000');
});

Here is a little Setup. We required the packages and made the server listen on port 4000.

If we type in the command line/terminal:

node index.js

After that we need to make the server listen for get request on the path /download. So, we added this:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.use(cors());
app.listen(4000, () => {
    console.log('Server Works !!! At port 4000');
});
app.get('/download', (req,res) => {
    var URL = req.query.URL;
    res.json({url:URL});
})

so, when the user sends a GET request to the server at the path /download then the server will respond with the query inserted with the request. Let’s go back to the front-end and try to make JavaScript send a GET request to the server. Also, I used the middleware cors() so my server can receive requests. I used fetch() to send the request from JavaScript:

var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
    console.log(`URL: ${URLinput.value}`);
    sendURL(URLinput.value);
});
function sendURL(URL) {
    fetch(`http://localhost:4000/download?URL=${URL}`, {
        method:'GET'
    }).then(res => res.json())
    .then(json => console.log(json));
}

So, we can see if we click on the button, we get a response back from the server with the URL that we send. Now we need to use ytdl-core which stand for YouTube DownLoader core which will download the video for us. Let’s go back to index.js. We are going to make it download the video then send it:

const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.use(cors());
app.listen(4000, () => {
    console.log('Server Works !!! At port 4000');
});
app.get('/download', (req,res) => {
var URL = req.query.URL;
res.header('Content-Disposition', 'attachment; filename="video.mp4"');
ytdl(URL, {
    format: 'mp4'
    }).pipe(res);
});

Basically, what is it doing is that when the user send a GET request it take the query given in the URL then adds a header that says any attachment sent needs to be called video.mp4. then use ytdl to download the video with format mp4 then pipe it (send it) to the user to download.

When you run this and test it, you will quickly find out that it doesn’t work. That is because the request needs to be in the URL rather than as a fetch. So, we can basically replace the fetch with a redirect to the URL to download the video.

and Now you will have your very own Downloader. You can also play around with the ytdl-core and try to add .mp3 or .flv formats. You can also do what I done before which is linking the YouTube Data API with your web application. Possibly Searching for a video then downloading it.

ytdl-core

ytdl-core is a module that can be installed in your node project. It allows you to download youtube videos. This awsome module was made by a person called fent. It has a lot of features which are great like ytdl.videoInfo which gives you different information about a video. I have use this feature to create a youtube downloader where you can search for the video or put the link in to download the video. ytdl-core can be used for all different purposes. Let me give you an example. If you want your website to have your video that you uploaded to youtube and you also don’t want it to be blocked in places where youtube is blocked like Schools. Then you can use ytdl-core to download your own video and use it. ytdl also allows you to validate Youtube URLs and validate Youtube video IDs

[This Project Files on GitHub]

— Thank you for reading. —

Nodejs, JavaScript, YouTube, Download ,Programming ,

Additional Articles