├── README.md
├── css
    └── style.css
├── index.php
├── js
    └── color_palette.js
├── res
    └── favicon.png
└── scripts
    ├── GetVideoInfo.php
    ├── download_img.php
    └── download_video.php


/README.md:
--------------------------------------------------------------------------------
1 | # youtube_video_downloader
2 |  
3 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800;900&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Poppins", sans-serif;
  8 | }
  9 | 
 10 | :root {
 11 |   --primary-color: #4193f0;
 12 |   --text-color-dark: #333;
 13 |   --text-color-light: #fff;
 14 |   --light-grey: #f5f5f5;
 15 | }
 16 | 
 17 | .downloader {
 18 |   height: 100vh;
 19 |   width: 100%;
 20 |   display: flex;
 21 |   align-items: center;
 22 |   justify-content: center;
 23 |   flex-direction: column;
 24 |   background-color: var(--primary-color);
 25 | }
 26 | 
 27 | .main {
 28 |   width: 426px;
 29 |   display: flex;
 30 |   flex-direction: column;
 31 |   padding: 15px;
 32 |   border-radius: 5px;
 33 |   /* background: var(--text-color-light);
 34 |     box-shadow: 0.1px 4px 8px 2px rgba(0, 0, 0, 0.05); */
 35 |   background: rgba(255, 255, 255, 0.25);
 36 |   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 37 |   backdrop-filter: blur(4px);
 38 |   -webkit-backdrop-filter: blur(4px);
 39 |   border-radius: 10px;
 40 |   border: 1px solid rgba(255, 255, 255, 0.18);
 41 | }
 42 | 
 43 | .main form {
 44 |   width: 100%;
 45 |   height: 45px;
 46 |   display: flex;
 47 |   justify-content: space-between;
 48 | }
 49 | 
 50 | .main form input:first-child {
 51 |   width: 80%;
 52 |   height: 100%;
 53 |   padding: 10px;
 54 |   border: none;
 55 |   outline: none;
 56 |   margin-right: 4px;
 57 |   border-radius: 5px;
 58 |   font-size: 1em;
 59 |   box-shadow: 0.1px 2px 8px 4px rgba(0, 0, 0, 0.05);
 60 | }
 61 | 
 62 | .main form input:last-child {
 63 |   width: 20%;
 64 |   height: 100%;
 65 |   padding: 10px;
 66 |   margin-left: 4px;
 67 |   border: none;
 68 |   outline: none;
 69 |   border-radius: 5px;
 70 |   background: var(--primary-color);
 71 |   color: var(--text-color-light);
 72 |   font-size: 1em;
 73 |   cursor: pointer;
 74 |   box-shadow: 0.1px 2px 8px 4px rgba(0, 0, 0, 0.05);
 75 | }
 76 | 
 77 | .video_detail_box {
 78 |   width: 100%;
 79 |   margin-top: 1em;
 80 | }
 81 | 
 82 | .video_detail_box .thumbnail_box {
 83 |   position: relative;
 84 | }
 85 | 
 86 | .thumbnail_box #img_download_btn {
 87 |   position: absolute;
 88 |   right: 10px;
 89 |   bottom: 10px;
 90 |   color: var(--text-color-light);
 91 |   height: 35px;
 92 |   width: 35px;
 93 |   border-radius: 50%;
 94 |   text-decoration: none;
 95 |   display: inline-flex;
 96 |   align-items: center;
 97 |   justify-content: center;
 98 |   background: var(--primary-color);
 99 | }
100 | 
101 | .thumbnail_box #original_video_link_btn {
102 |   position: absolute;
103 |   right: 55px;
104 |   bottom: 10px;
105 |   color: var(--text-color-light);
106 |   height: 35px;
107 |   width: 35px;
108 |   border-radius: 50%;
109 |   text-decoration: none;
110 |   display: inline-flex;
111 |   align-items: center;
112 |   justify-content: center;
113 |   background: #ec407a;
114 | }
115 | 
116 | .thumbnail_box img {
117 |   height: auto;
118 |   width: 100%;
119 |   border-radius: 5px;
120 |   object-fit: cover;
121 | }
122 | 
123 | .text_info {
124 |   width: 100%;
125 |   display: flex;
126 |   flex-direction: column;
127 |   margin-top: 10px;
128 | }
129 | 
130 | .text_info table {
131 |   border: 1px dashed #ccc;
132 |   margin-top: 10px;
133 | }
134 | 
135 | .text_info table th {
136 |   padding: 10px;
137 | }
138 | .text_info table td {
139 |   text-align: center;
140 |   padding: 10px;
141 | }
142 | 
143 | .additional_info {
144 |   display: flex;
145 |   align-items: center;
146 |   margin-top: 10px;
147 | }
148 | 
149 | .additional_info a {
150 |   padding: 5px 10px 5px 10px;
151 |   color: var(--text-color-light);
152 |   font-size: 13px;
153 |   border-radius: 5px;
154 |   text-decoration: none;
155 |   background: var(--primary-color);
156 | }
157 | 
158 | .additional_info p {
159 |   padding: 5px 10px 5px 10px;
160 |   color: #000;
161 |   font-size: 13px;
162 |   border-radius: 5px;
163 |   margin-left: 5px;
164 |   box-shadow: 0.1px 2px 8px 4px rgba(0, 0, 0, 0.05);
165 | }
166 | 
167 | #download_btn {
168 |   color: var(--text-color-light);
169 |   text-decoration: none;
170 |   background: var(--primary-color);
171 |   padding-left: 10px;
172 |   padding-right: 10px;
173 |   padding-top: 5px;
174 |   padding-bottom: 5px;
175 |   border-radius: 5px;
176 |   font-size: 15px;
177 |   display: inline-block;
178 | }
179 | 
180 | .instruction_box {
181 |   width: 100%;
182 |   display: flex;
183 |   align-items: center;
184 |   justify-content: center;
185 |   flex-direction: column;
186 |   margin-top: 2em;
187 | }
188 | 
189 | .instruction_box h3 {
190 |   margin-top: 10px;
191 | }
192 | .instruction_box p {
193 |   font-size: 14px;
194 |   margin-top: 5px;
195 | }
196 | 
197 | .instruction_box label {
198 |   height: 50px;
199 |   width: 50px;
200 |   border-radius: 50%;
201 |   background: var(--primary-color);
202 |   display: flex;
203 |   align-items: center;
204 |   justify-content: center;
205 | }
206 | 
207 | .instruction_box label i {
208 |   color: var(--text-color-light);
209 |   font-size: 1.2em;
210 | }
211 | 
212 | /* COLOR PALETTE */
213 | 
214 | .color-palette {
215 |   position: absolute;
216 |   display: flex;
217 |   flex-direction: column;
218 |   justify-content: center;
219 |   margin: 12px;
220 |   right: 0;
221 |   background: rgba(255, 255, 255, 0.2);
222 |   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
223 |   backdrop-filter: blur(1.5px);
224 |   -webkit-backdrop-filter: blur(1.5px);
225 |   border-radius: 10px;
226 |   border: 1px solid rgba(255, 255, 255, 0.18);
227 |   border-radius: 30px;
228 |   padding: 8px;
229 |   text-align: center;
230 |   top: 50%;
231 |   -ms-transform: translateY(-50%);
232 |   transform: translateY(-50%);
233 | }
234 | 
235 | .color-palette .theme-color {
236 |   background-color: red;
237 |   border-radius: 50%;
238 |   width: 30px;
239 |   height: 30px;
240 |   cursor: pointer;
241 | }
242 | 
243 | .color-palette .theme-color:not(:last-child) {
244 |   margin-bottom: 10px;
245 | }
246 | 
247 | /* drak mode palette */
248 | 
249 | .dark-mode {
250 |   position: absolute;
251 |   top: 12px;
252 |   right: 12px;
253 |   background: rgba(255, 255, 255, 0.25);
254 |   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
255 |   backdrop-filter: blur(4px);
256 |   -webkit-backdrop-filter: blur(4px);
257 |   border-radius: 50%;
258 |   padding: 8px 13px;
259 |   border: 1px solid rgba(255, 255, 255, 0.18);
260 | }
261 | 
262 | .dark-mode span {
263 |   font-size: 20px;
264 |   cursor: pointer;
265 | }
266 | 
267 | @media (max-width: 800px) {
268 |   .main {
269 |     width: 70%;
270 |   }
271 | }
272 | 
273 | @media (max-width: 500px) {
274 |   .main {
275 |     width: 80%;
276 |   }
277 | }
278 | 
279 | @media (max-width: 400px) {
280 |   .text_info table tbody tr th {
281 |     font-size: 14px;
282 |   }
283 | 
284 |   #download_btn {
285 |     font-size: 8px;
286 |   }
287 | }
288 | 
289 | /* Media Queries */
290 | @media only screen and (max-width: 436px) {
291 |   .color-palette {
292 |     max-width: 90%;
293 |     min-width: 90%;
294 |   }
295 | 
296 |   .color-palette .theme-color {
297 |     width: 22px;
298 |     height: 22px;
299 |   }
300 | }
301 | 
302 | @media only screen and (max-width: 636px) {
303 |   .color-palette {
304 |     flex-direction: row;
305 |     justify-content: center;
306 |     left: 50%;
307 |     bottom: 0;
308 |     padding: 0;
309 |     margin: 0 auto;
310 |     width: 400px;
311 |     margin-bottom: 16px;
312 |     text-align: center;
313 |     /*to remove*/
314 |     top: auto;
315 |     transform: translateX(-50%);
316 |   }
317 | 
318 |   .color-palette .theme-color {
319 |     margin-top: 10px;
320 |   }
321 | 
322 |   .color-palette .theme-color:not(:last-child) {
323 |     margin-right: 10px;
324 |   }
325 | }
326 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | include "./scripts/GetVideoInfo.php";
  4 | $isvalid = "";
  5 | $isVideoIdValid = "";
  6 | 
  7 | if (isset($_POST['submit'])) {
  8 |   $video_link = $_POST['video_url'];
  9 |   if ($video_link != "") {
 10 |     $isVideoIdValid = preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $video_link, $match);
 11 |     if ($isVideoIdValid == "1") {
 12 |       $video_id =  $match[1];
 13 | 
 14 |       // getting video information
 15 |       $video = json_decode(GetVideoInfo($video_id));
 16 |       $isvalid = $video->playabilityStatus->status;
 17 | 
 18 |       $formats = $video->streamingData->formats;
 19 |       $thumbnails = $video->videoDetails->thumbnail->thumbnails;
 20 |       $title = $video->videoDetails->title;
 21 |       $short_description = $video->videoDetails->shortDescription;
 22 |       $channel_id = $video->videoDetails->channelId;
 23 |       $channel_name = $video->videoDetails->author;
 24 |       $views = $video->videoDetails->viewCount;
 25 |       $video_duration_in_seconds = $video->videoDetails->lengthSeconds;
 26 |       $thumbnail = end($thumbnails)->url;
 27 | 
 28 |       // seconds to minutes&hours
 29 |       $hours = floor($video_duration_in_seconds / 3600);
 30 |       $minutes = floor(($video_duration_in_seconds / 60) % 60);
 31 |       $seconds = $video_duration_in_seconds % 60;
 32 |     }
 33 |   }
 34 | }
 35 | 
 36 | ?>
 37 | 
 38 | <!DOCTYPE html>
 39 | <html lang="en">
 40 | 
 41 | <head>
 42 |   <meta charset="UTF-8">
 43 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 44 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 45 |   <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
 46 |   <link rel="stylesheet" href="css/style.css">
 47 | 
 48 |   <!-- favicon -->
 49 |   <link rel="shortcut icon" href="res/favicon.png" type="image/x-icon">
 50 |   <title>Youtube Video Downloader</title>
 51 | </head>
 52 | 
 53 | <body>
 54 | 
 55 |   <!-- dark mode toggle -->
 56 |   <div class="dark-mode">
 57 |     <span class="dark-mode-btn">
 58 |       <i class="bx bx-moon"></i>
 59 |     </span>
 60 |   </div>
 61 | 
 62 |   <!--=========== COLOR PICKER ===========-->
 63 | 
 64 |   <div class="color-palette">
 65 |     <span class="theme-color"></span>
 66 |     <span class="theme-color"></span>
 67 |     <span class="theme-color"></span>
 68 |     <span class="theme-color"></span>
 69 |     <span class="theme-color"></span>
 70 |     <span class="theme-color"></span>
 71 |     <span class="theme-color"></span>
 72 |     <span class="theme-color"></span>
 73 |     <span class="theme-color"></span>
 74 |   </div>
 75 | 
 76 |   <div class="downloader">
 77 | 
 78 |     <div class="main">
 79 |       <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
 80 |         <input type="text" name="video_url" placeholder="Paste Video URL..." autocomplete="off">
 81 |         <input type="submit" name="submit" value="search">
 82 |       </form>
 83 | 
 84 |       <?php
 85 |       if ($isVideoIdValid == "0") { ?>
 86 |         <div class="instruction_box">
 87 |           <label><i class='bx bx-unlink'></i></label>
 88 |           <h3>Entered url is invalid.</h3>
 89 |           <p>make sure url is valid.</p>
 90 |         </div>
 91 |       <?php } else if ($isvalid == "") { ?>
 92 |         <div class="instruction_box">
 93 |           <label><i class='bx bx-link'></i></label>
 94 |           <h3>Copy video url & paste here.</h3>
 95 |           <p>make sure url is valid.</p>
 96 |         </div>
 97 | 
 98 |       <?php } else if ($isvalid == "OK") { ?>
 99 | 
100 |         <div class="video_detail_box">
101 |           <div class="thumbnail_box">
102 |             <img src="<?php echo $thumbnail; ?>" alt="thumbnail">
103 |             <a href="./scripts/download_img.php?url=<?php echo $thumbnail; ?>&name=<?php echo $title; ?>" id="img_download_btn"><i class='bx bxs-download'></i></a>
104 |             <a href="<?php echo $video_link; ?>" target="_blank" id="original_video_link_btn"><i class='bx bxl-youtube'></i></a>
105 |           </div>
106 | 
107 |           <?php if (!empty($formats)) {
108 | 
109 |             if (@$formats[0]->url == "") { ?>
110 |               <div class="instruction_box">
111 |                 <label><i class='bx bx-video-off'></i></label>
112 |                 <h3>Unsupported.</h3>
113 |                 <p>This video is currently unsupported.</p>
114 |               </div>
115 | 
116 |             <?php } else { ?>
117 | 
118 |               <div class="text_info">
119 |                 <h4><?php echo $title; ?></h4>
120 | 
121 |                 <div class="additional_info">
122 |                   <a href="<?php echo 'https://www.youtube.com/channel/' . $channel_id ?>" target="_blank"><?php echo $channel_name ?></a>
123 |                   <p><i class='bx bx-time-five'></i>&nbsp; <?php echo "$hours:$minutes:$seconds"; ?></p>
124 |                   <p><i class='bx bx-show'></i>&nbsp; <?php echo $views; ?></p>
125 |                 </div>
126 |                 <table>
127 | 
128 |                   <tr>
129 |                     <th>Quality</th>
130 |                     <th>Format</th>
131 |                     <th>Download</th>
132 |                   </tr>
133 | 
134 |                   <?php foreach ($formats as $format) {
135 | 
136 |                     // getting all available video formats
137 |                     if (@$format->url == "") {
138 |                       $signature = "https://youtube.com?" . $format->signatureCipher;
139 |                       parse_str(parse_url($signature, PHP_URL_QUERY), $parse_signature);
140 |                       $url = $parse_signature['url'] . "&sig=" . $parse_signature['s'];
141 |                     } else {
142 |                       $url = $format->url;
143 |                     }
144 |                   ?>
145 | 
146 |                     <tr>
147 |                       <td> <?php if ($format->qualityLabel) echo $format->qualityLabel;
148 |                             else echo "Unknown"; ?>
149 |                       </td>
150 |                       <td><?php if ($format->mimeType) echo explode(";", explode("/", $format->mimeType)[1])[0];
151 |                           else echo "Unknown"; ?>
152 |                       </td>
153 |                       <td><a href="./scripts/download_video.php?link=<?php echo urlencode($url) ?>&title=<?php echo urlencode($title) ?>&type=<?php if ($format->mimeType) echo explode(";", explode("/", $format->mimeType)[1])[0];
154 |                                                                                                                                               else echo "mp4"; ?>" id="download_btn"><i class='bx bxs-download'></i>&nbsp;Download</a></td>
155 |                     </tr>
156 | 
157 |                   <?php } ?>
158 | 
159 |                 </table>
160 | 
161 |               </div>
162 |         </div>
163 | 
164 |     <?php }
165 |           }
166 |         } else { ?>
167 |     <div class="instruction_box">
168 |       <label><i class='bx bx-video-off'></i></label>
169 |       <h3>Unable to fetch video info.</h3>
170 |       <p>make sure url is valid.</p>
171 |     </div>
172 |   <?php } ?>
173 |     </div>
174 |   </div>
175 |   <!--=========== JS ===========-->
176 |   <script src="js/color_palette.js"></script>
177 | </body>
178 | 
179 | </html>


--------------------------------------------------------------------------------
/js/color_palette.js:
--------------------------------------------------------------------------------
 1 | //get the theme from local storage
 2 | getTheme();
 3 | 
 4 | //color palette
 5 | const colors = [
 6 |   "hsl(345, 80%, 50%)",
 7 |   "hsl(100, 80%, 50%)",
 8 |   "hsl(200, 80%, 50%)",
 9 |   "hsl(227, 66%, 55%)",
10 |   "hsl(26, 80%, 50%)",
11 |   "hsl(44, 90%, 51%)",
12 |   "hsl(280, 100%, 65%)",
13 |   "hsl(480, 100%, 25%)",
14 |   "hsl(180, 100%, 25%)",
15 | ];
16 | 
17 | const colorBtns = document.querySelectorAll(".theme-color");
18 | const darkModeBtn = document.querySelector(".dark-mode-btn");
19 | 
20 | //change theme to dark
21 | var isDark = false;
22 | darkModeBtn.addEventListener("click", () => {
23 |   if(!isDark) {
24 |     changeTheme("#000");
25 |     isDark = true;
26 |   }else{
27 |     changeTheme(colors[3]);
28 |     isDark = false;
29 |   }
30 | });
31 | 
32 | //loop through colors array and set each color to a button
33 | for (let i = 0; i < colorBtns.length; i++) {
34 |   colorBtns[i].style.backgroundColor = colors[i];
35 | }
36 | 
37 | colorBtns.forEach((btn) => {
38 |   btn.addEventListener("click", () => {
39 |     changeTheme(btn.style.backgroundColor);
40 |   });
41 | });
42 | 
43 | function changeTheme(color) {
44 |   document.documentElement.style.setProperty("--primary-color", color);
45 |   saveTheme(color);
46 | }
47 | 
48 | //get the theme from local storage
49 | function getTheme() {
50 |   const theme = localStorage.getItem("theme");
51 |   if (theme) {
52 |     changeTheme(theme);
53 |   }
54 | }
55 | 
56 | //save the theme to local storage
57 | function saveTheme(color) {
58 |   localStorage.setItem("theme", color);
59 | }
60 | 


--------------------------------------------------------------------------------
/res/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdellatif-laghjaj/youtube_video_downloader/aec23010efcbd10a6375d9d9c6b5f0a99f26e843/res/favicon.png


--------------------------------------------------------------------------------
/scripts/GetVideoInfo.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | function GetVideoInfo($video_id){
 4 | 
 5 |     $ch = curl_init();
 6 |     
 7 |     curl_setopt($ch, CURLOPT_URL, 'https://www.youtube.com/youtubei/v1/player?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8');
 8 |     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 9 |     curl_setopt($ch, CURLOPT_POST, 1);
10 |     curl_setopt($ch, CURLOPT_POSTFIELDS, '{  "context": {    "client": {      "hl": "en",      "clientName": "WEB",      "clientVersion": "2.20210721.00.00",      "clientFormFactor": "UNKNOWN_FORM_FACTOR",   "clientScreen": "WATCH",      "mainAppWebInfo": {        "graftUrl": "/watch?v='.$video_id.'",           }    },    "user": {      "lockedSafetyMode": false    },    "request": {      "useSsl": true,      "internalExperimentFlags": [],      "consistencyTokenJars": []    }  },  "videoId": "'.$video_id.'",  "playbackContext": {    "contentPlaybackContext": {        "vis": 0,      "splay": false,      "autoCaptionsDefaultOn": false,      "autonavState": "STATE_NONE",      "html5Preference": "HTML5_PREF_WANTS",      "lactMilliseconds": "-1"    }  },  "racyCheckOk": false,  "contentCheckOk": false}');
11 |     curl_setopt($ch, CURLOPT_ENCODING, 'gzip, deflate');
12 |     
13 |     $headers = array();
14 |     $headers[] = 'Content-Type: application/json';
15 |     curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
16 |     
17 |     $result = curl_exec($ch);
18 |     if (curl_errno($ch)) {
19 |         echo 'Error:' . curl_error($ch);
20 |     }
21 |     curl_close($ch);
22 |     return $result;
23 |     
24 |     }
25 | 
26 | ?>


--------------------------------------------------------------------------------
/scripts/download_img.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | $downloadURL = $_GET['url'];
 3 | $img_name = $_GET['name'];
 4 | $extension = "jpg";
 5 | $fileName = $img_name.'.'.$extension;
 6 | 
 7 | if (!empty($downloadURL) && substr($downloadURL, 0, 8) === 'https://') {
 8 |     header("Cache-Control: public");
 9 |     header("Content-Description: File Transfer");
10 |     header("Content-Disposition: attachment;filename=\"$fileName\"");
11 |     header("Content-Transfer-Encoding: binary");
12 | 
13 |     readfile($downloadURL);
14 | }
15 | 
16 | ?>


--------------------------------------------------------------------------------
/scripts/download_video.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | $downloadURL = urldecode($_GET['link']);
 3 | $type = urldecode($_GET['type']);
 4 | $title = urldecode($_GET['title']);
 5 | $fileName = $title.'.'.$type;
 6 | 
 7 | 
 8 | if (!empty($downloadURL) && substr($downloadURL, 0, 8) === 'https://') {
 9 |     header("Cache-Control: public");
10 |     header("Content-Description: File Transfer");
11 |     header("Content-Disposition: attachment;filename=\"$fileName\"");
12 |     header("Content-Transfer-Encoding: binary");
13 | 
14 |     readfile($downloadURL);
15 | 
16 | }


--------------------------------------------------------------------------------