Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Get the YouTube video ID from a URL using JavaScript
Every YouTube video has a unique URL through which we can access it in the browser. Every YouTube video contains a unique video id, which makes the URL unique. Sometimes, developers need to extract the video id from the YouTube URL.
We need to play with the YouTube URL string to extract the video id from the URL, which we will do in this tutorial. We will learn different approaches to getting the video id from a full URL.
Using the split() Method
JavaScript contains the built-in split() method, which allows users to split the string into multiple parts via a particular delimiter. The split() method takes a delimiter as a parameter, and via that, it splits the strings into multiple parts and returns the array containing string parts.
Syntax
You can follow the syntax below to use the split() method to extract the video Id from the YouTube video URL.
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy";
var splited = videoURL.split("v=");
var splitedAgain = splited[1].split("&");
var videoId = splitedAgain[0];
In the above syntax, we have used the split() method multiple times to get the video Id.
Steps
Users can follow the below steps to use the split() method to extract the video Id from the URL.
Step 1 ? Take the video URL.
Step 2 ? Split the video URL via the 'v=' delimiter, which will return an array of length two. The second value of the array contains the video Id.
Step 3 ? Now, split the second value of the array using the '&' as a delimiter, which will also split the value into two parts.
Step 4 ? The first value of the splitedAgain array contains the video id.
Example
In the example below, we have taken the YouTube video URL. After that, we used the above steps and split the URL multiple times with different delimiters to get the video Id from the URL.
<html>
<body>
<h3>Getting the video ID from the YouTube videoURL using the <i>split()</i> Method.</h3>
<p id="output"></p>
<script>
let output = document.getElementById("output");
// defining the videoURL
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy";
// split URL via 'v=' delimiter
var splited = videoURL.split("v=");
// take the value from the first index of splited, and split it via '&'.
var splitedAgain = splited[1].split("&");
// get the value from 0th index from splitedAgain array
var videoId = splitedAgain[0];
output.innerHTML += "Video URL: <br>" + videoURL + "<br><br>";
output.innerHTML += "Video id: " + videoId;
</script>
</body>
</html>
Video URL: https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy Video id: IZ1GYnI9a5E
Using Regular Expression
The regular expression is a search pattern that allows us to search for a particular pattern in the string. Here, we will search for a video id in the video URL. Every YouTube URL contains the video id after the 'v=' substring. So, we can find that pattern using regular expressions and get the video Id.
Syntax
Users can follow the syntax below to extract the video id from the Youtube video URL using the regular expression.
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy"; let regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[?])|$))/gm; var videoId = regex.exec(videoURL)[3];
In the above syntax, we used the exec() method by using the regex as a reference to find matches to the regex pattern.
Regular Expression Explained
(youtu.*be.*) ? it matches the youtube domain after HTTPS.
/(watch\?v=|embed\/|v|shorts|) ? It matches for the /watch after domain, or 'v=' after domain, or embed or shorts or only 'v'. Here, '|' suggest the OR operation.
(.*?((?=[?])|$)) ? It matches the different string characters containing the id.
gm ? The 'g' flag is used to match all occurrences, and the 'm' flag is used to match multiple lines.
Example
In the example below, we have created the regular expression explained above and invoked the exec() method by taking it as a reference. Also, we have passed the videoURL as a parameter of the exec() method to match the pattern defined in the regex with the video URL.
The exec() method returns the four different matches from the correct YouTube URL, and the last value contains only the video id.
<html>
<body>
<h3>Getting the video ID from the YouTube videoURL using the <i>regular expression</i></h3>
<p id="output"></p>
<script>
let output = document.getElementById("output");
// defining the videoURL
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy";
// defining the regular expression
let regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[?])|$))/gm;
var allMathces = regex.exec(videoURL);
// Matching the values
var videoId = allMathces[3];
output.innerHTML += "Video URL: <br>" + videoURL + " <br><br>";
output.innerHTML += "Video id: " + videoId;
</script>
</body>
</html>
Video URL: https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy Video id: IZ1GYnI9a5E
Using URLSearchParams (Modern Approach)
JavaScript provides the URLSearchParams API to work with URL query parameters. This is the most reliable method for standard YouTube URLs.
<html>
<body>
<h3>Getting the video ID using <i>URLSearchParams</i></h3>
<p id="output"></p>
<script>
let output = document.getElementById("output");
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy";
// Create URL object and extract search params
let url = new URL(videoURL);
let params = new URLSearchParams(url.search);
let videoId = params.get('v');
output.innerHTML += "Video URL: <br>" + videoURL + " <br><br>";
output.innerHTML += "Video id: " + videoId;
</script>
</body>
</html>
Video URL: https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy Video id: IZ1GYnI9a5E
Comparison
| Method | Complexity | Handles Edge Cases | Browser Support |
|---|---|---|---|
| split() Method | Medium | Limited | All browsers |
| Regular Expression | High | Good | All browsers |
| URLSearchParams | Low | Best | Modern browsers |
Conclusion
The URLSearchParams method is the most reliable for standard YouTube URLs, while regular expressions handle various URL formats. Choose the split() method for simple cases or when supporting older browsers.
2K+ Views
