How to Get Youtube Video Thumbnail in Different Resolutions by Youtube URL or VideoID in Javascript Full Project For Beginners

How to Get Youtube Video Thumbnail in Different Resolutions by Youtube URL or VideoID in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be getting youtube video thumbnails in different resolutions in javascript using youtube video url or videoid. 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>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        h2 {
  text-align: center;
  display: block;
  overflow: hidden;
  font-size: 1.em;
  font-weight: 100;
  margin: 20px 0;
  font-family: 'Open Sans';
  font-weight: 700;
  text-transform: uppercase;
}

h2 span {
  position: relative;
  display: inline-block;
  line-height: 1;
}
h2 span:before,
h2 span:after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: #000;
  width: 99999px;
}
h2 span:before {
  left: 100%;
  margin-left: 20px;
}
h2 span:after {
  right: 100%;
  margin-right: 20px;
}

    </style>
    <body>
        <div class="container">
            <div class="row">
              <div class="col-md-12">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/RGzKJCOE5rw" frameborder="0" allowfullscreen></iframe> 
                
              <h1>Get different resolution of thumbnail images of Youtube video using youtube video id </h1> 
                
                <h2><span>Default image </span></h2>
              <img src="https://img.youtube.com/vi/RGzKJCOE5rw/default.jpg" >
              <h2><span>full size image</span> </h2>
              <img src="https://img.youtube.com/vi/RGzKJCOE5rw/0.jpg" >
                <h2><span>Medium quality image </span></h2>
              <img src="https://img.youtube.com/vi/RGzKJCOE5rw/mqdefault.jpg" >
              <h2><span>Standard definition image</span> </h2>
              <img src="https://img.youtube.com/vi/RGzKJCOE5rw/sddefault.jpg" >      
              <h2><span>High quality image</span> </h2>      
              <img src="https://img.youtube.com/vi/RGzKJCOE5rw/hqdefault.jpg" >    
              <h2><span>Maximum resolution image</span> </h2>
              <img src="https://img.youtube.com/vi/RGzKJCOE5rw/maxresdefault.jpg" >
              </div>
            </div>
          </div>
    </body>
</html>

 

See also  Node.js Express Upload Files on Server With Custom Name Using Multer Library in Javascript Full Example Project For Beginners

 

Leave a Reply