Code With Mark
Home
About
Resources
Contact

Learn To Create YouTube Video Downloader

Learn how to download youtube videos or embed them without any youtube watermarks...    

In order for you to download youtube video, you will first need to get the youtube video info.

Get Youtube Video Info

This url will give you all the info for a youtube video. 

https://www.youtube.com/get_video_info?html5=1&video_id=youtube_id

For example, if you want to download this (https://www.youtube.com/watch?v=WiOf6myUZZI ) youtube video, the youtube id would be :  WiOf6myUZZI

PHP Code

In you php, type in the below code

<?php
 

if(isset($_GET['id']) )
{
	$youtube_id = $_GET['id'];

	$youtube_video_info = file_get_contents('https://www.youtube.com/get_video_info?html5=1&video_id='.$youtube_id);

	echo $youtube_video_info;
}

?>

HTML/JavaScript Code

Here is the whole html code for you.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>YouTube Video Downloader</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

	<script>
	$(document).ready(function($)
	{ 
		var youtube_data_parser = function(data)
		{
			//---> parse video data - start
			var qsToJson = function (qs) 
			{
				var res = {};
				var pars = qs.split('&');
				var kv, k, v;
				for (i in pars) 
				{
					kv = pars[i].split('=');
					k = kv[0];
					v = kv[1];
					res[k] = decodeURIComponent(v);
				}
				return res;
			}			
			//---> parse video data - end

			var get_video_info = qsToJson(data);

			if(get_video_info.status == 'fail')
			{
				return {status:"error", code: "invalid_url",  msg : "check your url or video id"};

			} 
			else  
			{
				// remapping urls into an array of objects

				//--->parse > url_encoded_fmt_stream_map > start

				//will get the video urls
				var tmp = get_video_info["url_encoded_fmt_stream_map"];
				if (tmp) 
				{
					tmp = tmp.split(',');
					for (i in tmp) 
					{
					  tmp[i] = qsToJson(tmp[i]);
					}		    
					get_video_info["url_encoded_fmt_stream_map"] = tmp;
				}
				//--->parse > url_encoded_fmt_stream_map > end


				//--->parse > player_response > start
				var tmp1 = get_video_info["player_response"];
				if (tmp1) 
				{ 		    
					get_video_info["player_response"] = JSON.parse(tmp1);
				}
				//--->parse > player_response > end

				//--->parse > keywords > start
				var keywords = get_video_info["keywords"];
				if (keywords) 
				{ 	
					key_words = keywords.replace(/\+/g,' ').split(',');
					for (i in key_words) 
					{
					  keywords[i] = qsToJson(key_words[i]);
					}
					get_video_info["keywords"] = {all:keywords.replace(/\+/g,' '), arr: key_words};
				}				
				//--->parse > keywords > end

				//return data
				return {status: 'success', raw_data:qsToJson(data), video_info:get_video_info};
			}
		}


		

		$(document).on('click', '.btn_get_youtube_vidoe_id', function(event) 
		{
			event.preventDefault();
			
			var get_video_id = $('.youtube_video_id').val();

			var ajax_url = 'http://localhost/?id='+get_video_id;
			 
			$.get(ajax_url, function(d1) 
			{	
				
				var data = youtube_data_parser(d1)

				console.log( data)
				 
				var video_data = data.video_info

				var video_title = video_data.title.replace(/\+/g,' ')
				var video_thumbnail_url = video_data.thumbnail_url

				var video_arr = video_data.url_encoded_fmt_stream_map;

				//quality "hd720"
				var video_arr_final = {}
				$.each(video_arr, function(i1, v1) 
				{
					if(v1.quality == "hd720")
					{	
						var url = v1.url
						video_arr_final = {
							video_title:video_title,
							video_thumbnail_url:video_thumbnail_url,
							video_url:v1.url
						}
					}
				});
				 
				var d = ''
				+ '<br>'
				+'<a class="btn  btn-primary" href="'+video_arr_final.video_url+'" download="youtube.mp3"> Download</a>'

				+'<video  src="'+video_arr_final.video_url+'" controls autoplay controlsList="nodownload" oncontextmenu="return false;" height="350" width="100%">'
				+'</video >'

				$('.youtube_video').html(d) 

			});

		});

	});
	</script>

 

</head>
<body>

<h1>Youtube Video Downloader</h1>
<br><br>
<div class="co1l-md-3">
	<label for="ex1">Enter Youtube Video ID</label>
	<input class="form-control youtube_video_id" type="text">
	<br>
	<span   class="btn btn-success btn_get_youtube_vidoe_id">Get Video Info</span>
</div>


<br><br>

<div class="youtube_video"></div>

 

  
</body>
</html>
For Web Developers

Stop Building Websites That Pay You Once.

Use Shiply CMS to launch websites faster, manage clients easier, and turn every project into recurring monthly income.

Start Building Faster 🚀 Download Shiply CMS
Update  Sublime Text Sidebar ThemeUpdate Sublime Text Sidebar Theme←Previous
Convert numbers to words (number spelling) in JavaScriptConvert numbers to words (number spelling) in JavaScriptNext→

Related Posts

  • How Google Developers Think (And Why You Should Too)
  • Add Google Sign-In in 2 Minutes
  • Easily Edit HTML Table Rows Or Cells With jQuery

Top Posts Viewed

Using JavaScript Window Onload Event Correctly
65 views
How Google Developers Think (And Why You Should Too)
56 views
Google Sheets Timesheet Website App Script
51 views

Categories

Courses
Excel
Google Script
Javascript
jQuery
Microsoft Access
MongoDB
Node JS
PHP
Quick Tip
Uncategorized
Wordpress