Ever wanted to quickly and easily access your url query parameters?
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
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>
You finish a project, get paid, and then it's back to finding the next client.
Month after month, the cycle repeats.
That's why many web developers never build real financial freedom—even though they're highly skilled.
The developers creating long-term wealth are using those same skills to build SaaS products, plugins, and digital tools that generate recurring income.
What if your next project could pay you more than once?
Learn How To Build Monthly Income →