Let's suppose you want to develop a web page that will display different youtube videos based on the url parameter. 

Assuming this is your url you want to work with and id is the youtube video you want to display: https://codewithmark.com/video/?id=YJ5X9mt-5cg&code123

Extract URL Parameter

First, you will have extract the "id" parameter out of url.

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

var get_id = getUrlParameter('id');

console.log(qry_para );

//YJ5X9mt-5cg 

Display Youtube Video

if(get_id)
{
	var str = ''
	+'<div class="embed-responsive embed-responsive-16by9">'
 		+'<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+get_id+'?rel=0"></iframe>'
	+'</div>'

	//div where you want to show video
	$('.youtube_video').html(str)

}

Everything Combined

<!DOCTYPE html>
<html lang="en">
<head>
	<title>YouTube Videos</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($)
	{
		function getUrlParameter(name) {
		    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
		    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
		    var results = regex.exec(location.search);
		    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
		};

		var get_id = getUrlParameter('id');

		if(get_id)
		{
			var str = ''
			+'<div class="embed-responsive embed-responsive-16by9">'
		 		+'<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+get_id+'?rel=0"></iframe>'
			+'</div>'

			//div where you want to show video
			$('.youtube_video').html(str)

		} 
	});
	</script>

 

</head>
<body>

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

  
</body>
</html>










Name

Email

Website

Comment

Post Comment