All the different thumbnail sizes of a YouTube video are accessible from a standard format. All you need is the unique video ID (viewable in the URL of your video).

Thumbnail Image Format: http://img.youtube.com/vi/THE-VIDEO-ID/FILENAME.jpg

The file name depends on which thumbnail size you are looking for. There are several to choose from:

    • http://img.youtube.com/vi/THE-VIDEO-ID/0.jpg or
      http://img.youtube.com/vi/THE-VIDEO-ID/default.jpg – full size thumb
    • http://img.youtube.com/vi/THE-VIDEO-ID/mqdefault.jpg – medium default
    • http://img.youtube.com/vi/THE-VIDEO-ID/maxresdefault.jpg – high res
    • http://img.youtube.com/vi/THE-VIDEO-ID/1.jpg – small thumb
    • http://img.youtube.com/vi/THE-VIDEO-ID/2.jpg – small thumb
    • http://img.youtube.com/vi/THE-VIDEO-ID/3.jpg – small thumb

Example Usage

Using this information and the Advanced Custom Fields WordPress plugin allowed me to have the client simply enter the ID of the video they wanted, and the rest was taken care of by the code and CSS. The thumbnail is displayed in an HTML element that is styled as if it were a player; with a video frame background image and an overlaid transparent play button. I then had this open a a modal window with the embedded video.

Comments on this Article

  1. Paul says:

    Thanks for the tip. Now Youtube have the short link option when clicking on embed it means we need to add more detailed instructions for users to help them grab the right part of the link for the video id. I’m wondering whether I should have users enter the entire youtube link and do some pattern matching to grab the id from the permutations of links to the vid. Could extract everything before the ampersand too if they paste in a link with “&feature=” etc. Haven’t done anything with videos in Yii before so it will be interesting to wrestle with these things. Thanks for the thumbnail info – didn’t know about that.

  2. shannon says:

    thank you so much for that! i’ve always tried to use wordpress plugins to accomplish this, but this saves a lot of time and load time for me.

    are there any links to larger images that are usable? larger images?

    • Josh says:

      I’m glad it was useful. Try maxresdefault.jpg. I’ve updated the post to include this.

  3. Anu Maharjan says:

    Do we same some similar patterns for YouTube playlist thumbnails?

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.