Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Use 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.
Also, in the output, users can observe the values stored in the split and splitedAgain array.
<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=");
//output.innerHTML += "The values of splited is " + splited + "</br>"
// take the value from the first index of splited, and split it via '&'.
var splitedAgain = splited[1].split("&");
//output.innerHTML += "The values of splitedAgain is " + splitedAgain + "</br>"
// 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>
Using the 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> ";
output.innerHTML += "Video id: " + videoId;
</script>
</body>
</html>
Users learned to extract the video id from the YouTube video URL. We have just played with the strings and used the different string methods to extract the video id. We used the split() method two times in the first approach. Also, users can use the split() method first and the substr() method after that rather than using the split() method two times.
In the second approach, users can use the match() method with a regular expression rather than the exec() method. So, users can try different approaches like that and learn new things.
413 Views
