Youtube - Get different resolution of thumbnail images of Youtube video using youtube video id

Getting any YouTube videos thumbnail image is quite easy. you just need a ID of particular youtube video to get it's thumbnail image in different resolutions. Use following URLs in your image tag to show required youtube thumbnail.

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg -   default
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg - medium 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg - high
http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg - standard
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg  - maximum resolution

Following is a actual implementation to show how it works.

<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> 
    <h1>Default image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/default.jpg" >
    <h1>full size image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/0.jpg" >
      <h1>Medium quality image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/mqdefault.jpg" >
    <h1>Standard definition image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/sddefault.jpg" >      
    <h1>High quality image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/hqdefault.jpg" >    
    <h1>Maximum resolution image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/maxresdefault.jpg" >
    </div>
  </div>
</div>

Downlaod Source

See the Pen Youtube - get thumbnail images of videos by Yashwant Patel (@yashwant) on CodePen.

Share This:

Post Tags:

HTML PHP Youtube

Yashwant Patel