Get the Thumbnails of a YouTube Video: Standard URL and File Names

by Josh | Posted in Tutorials & Guides | Tagged: ,

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.

Recommended Books For Web Devs

CSS Secrets [Book Cover] Building out a design into HTML and CSS is like a series of small puzzles— some trickier than others. CSS Secrets: Better Solutions to Everyday Web Design Problems is a practical and modular look at many of the unique challenges you'll encounter during front-end development. Well-designed, and easy to pick up for any intermediate to advanced front-end dev looking to pick up some tips and tricks, and honing the processes used to figure them out.

Eloquent JavaScript [Book Cover] Eloquent JavaScript: A Modern Introduction to Programming is an engaging and well-formatted overview of JavaScript, complete with example projects and helpful diagrams. It's easy to read—not too dense, with readable type—and covers many subjects. The revised edition covers some of the newer features of JavaScript, including: class notation, arrow functions, iterators, async functions, template strings, and block scope.

The Phoenix Project [Book Cover] While The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win is a fictional novel, the slightly exaggerated characters and situations involved will be very familiar to anyone working in software development and IT. In it, an IT manager is confronted with the seemingly impossible task of turning around a project that's over-budget and past deadlines in 90 days, or else his department will be outsourced. The morals and takeaways from this story about DevOps and lean principles will stick with you.

Comments on this Article

  1. | Link
    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.

    Reply
  2. | Link
    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?

    Reply
    • | Link
      Josh says:

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

      Reply
  3. | Link
    Anu Maharjan says:

    Do we same some similar patterns for YouTube playlist thumbnails?

    Reply
  4. | Link
    Branden Tolle says:

    fyi it seems like there’s another “hqdefault.jpg”

    Reply

Leave a Reply

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