Build a Youtube API Video Thumbnail Extractor or Grabber From URL in Vanilla Javascript Full Project For Beginners

Build a Youtube API Video Thumbnail Extractor or Grabber From URL in Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building  youtube api video thumbnail extractor or grabber from url in vanilla javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
    <head>
        <title>Thumbnail Extractor</title>
    </head>
    <body>
        <form name="frm">
              <input type="text" name="url" placeholder="Enter video url here"/><br />
            <input type="button" value="Fetch" onclick="fetch()" />
            
        </form><br />
        <img id="myimg" src="" />
    </body>
    <script src="script.js"></script>
</html>

 

 

Now create a script.js javascript file and copy paste the below code

 

script.js

 

function tag(){
    var url = document.forms["frm"]["url"].value;
    if(url.startsWith("http://")){
        let len = url.length - 1;
        let tmp = url.substr(7,len);
        url = tmp;
    }
    else if(url.startsWith("https://")){
        let len = url.length -1;
        let tmp = url.substr(8,len);
        url = tmp;
    }
    else{
        console.log("Invalid url");
        url = "";
    };
   // console.log(url);
    if(url.startsWith("youtu.be/")){
            let leng = url.length - 1;
            let temp = url.substr(9,leng);
            url = temp;
        }
    else if(url.startsWith("youtube.com/watch?v=")){
            let leng = url.length - 1;
            let temp = url.substr(20,leng);
            url = temp;
        }
    else if(url.startsWith("m.youtube.com/watch?v=")){
            let leng = url.length - 1;
            let temp = url.substr(22,leng);
            url = temp;
        }
    else if(url.startsWith("www.youtube.com/watch?v=")){
            let leng = url.length - 1;
            let temp = url.substr(24,leng);
            url = temp;
        }
        else {
           console.log("Invalid url");
           url = "";
        }
  return url;
};
function fetch(){
  let uri =`https://img.youtube.com/vi/${tag()}/sddefault.jpg`;
    let a = document.getElementById("myimg");
    a.src=uri;
}

 

See also  HTML2PDF Example to Export Bootstrap 4 Form to PDF Document in Browser Using HTML5 & Javascript Full Project For Beginners

 

Now if you open index.html inside browser you will see the below result

 

 

Leave a Reply