Monday, April 20, 2015

Thumbnails of a YouTube Video

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.

No comments:

Post a Comment