Welcome folks today in this blog post we will be talking about that how to extract the video ID from YouTube URL so for this tutorial we will be using two methods which are there in JavaScript which is first method is split method and the second method is Substring method
Practical Video
1) Split Method:
The first method split method is used to split up the string into two parts the first part will hold the first portion of the string and the second part will hold the second portion of the string The method split the string into arrays
2) Substring Method:
The second method substring method is used to get a sub portion of the string so this method accept two parameters the first parameter is the starting position of the characters where you want to get your string and the second argument is the last portion of the string where you want to get the characters.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Video Id Extractor</title>
</head>
<body>
<h1>Youtube Video Id Extractor in Vanilla Javascript</h1>
<form id="myForm">
<input type="text" id="url" required placeholder="URL">
<input type="submit" value="Get Video Id">
</form>
<div id="resultUrl">
</div>
<div id="result">
</div>
</body>
<script>
var form = document.getElementById("myForm")
form.addEventListener("submit",function(e){
e.preventDefault()
var url = document.getElementById("url").value
document.getElementById("resultUrl").innerHTML = "The Original Url is " + url
// split splits up the strings
// substring method
document.getElementById("result").innerHTML = "The videoId is " + url.split("v=")[1].substring(0, 11);
})
</script>
</html>
