Easily Get Query String Parameters with JavaScript
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
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>Why Are Developers Switching to Shiply CMS?
Because they're tired of:
- ✓ Bloated admin dashboards
- ✓ Endless plugin maintenance
- ✓ Spending hours on tasks that should take minutes
If that sounds familiar, Shiply CMS might be worth a look.
Take a Look →
