How to Extract Youtube Video Id From Youtube URL in Javascript

How to Extract Youtube Video Id From Youtube URL in Javascript

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.

See also  Node.js jsPDF Wrapper to Generate PDF Documents From HTML5 Template Using jspdfmake Library in Javascript Full Project For Beginners


Source Code


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube Video Id Extractor</title>
    <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">

    <div id="resultUrl">


    <div id="result">




var form = document.getElementById("myForm")


    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);



Leave a Reply