Using Youtube Thumbnails on your Websites

Categories

Tips, Web Design

I seem to find myself working with Youtubes thumbnail images quite a lot (for instance on Miniclips videos section) – and I am always having to go searching for the parameters to use to generate those thumbnail images.

The highest quality of these images is the maxresdefault.jpg image, but not all videos have these available. With that in mind I thought I would try and find out what the other parameters are and what they do.

So I made a little app to view them as you can see below:

For reference the urls are as follows:

4 Frames from Key Points in the animation

http://img.youtube.com/vi/[video-id]/0.jpg
http://img.youtube.com/vi/[video-id]/1.jpg
http://img.youtube.com/vi/[video-id]/2.jpg
http://img.youtube.com/vi/[video-id]/3.jpg

Default thumbnail (the one seen on Youtube itself)

http://img.youtube.com/vi/[video-id]/default.jpg

High Quality default image (hqdefault.jpg)

http://img.youtube.com/vi/[video-id]/hqdefault.jpg

Medium Quality default image (mqdefault.jpg)

http://img.youtube.com/vi/[video-id]/mqdefault.jpg

Standard definition thumbnail (sddefault.jpg)

http://img.youtube.com/vi/[video-id]/sddefault.jpg

The largest size thumbnail available (maxresdefault.jpg)

http://img.youtube.com/vi/[video-id]/maxresdefault.jpg

How was it for you? Let me know on BlueSky or Mastodon

(Please) Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

<a href="https://www.binarymoon.co.uk/2014/03/using-youtube-thumbnails/">Using Youtube Thumbnails on your Websites</a>

Related Posts

06 Apr 2015

Disabling Website URLs in WordPress Comments

These days a lot of spammers submit spam comments that are perfectly legitimate apart from the fact that they link somewhere. So I thought I would disable the website url field in the comments so that comments can focus on...
27 Oct 2013

WordPress Numeric Pagination

I’ve made quite a few WordPress themes in my time, and so I thought I would write a few blog posts sharing some of the code snippets that I find myself using repeatedly.First off is some numeric pagination using native...
12 Apr 2013

My First Website

My first website was terrible. Not intentionally I hasten to add – but because I was told to make it bad…I started university in 1998, the internet was just starting to become more mainstream. It was still a few years...
19 Apr 2011

Simple WordPress Post Thumbnails with Regular Expressions

These days everyone with a blog understands the importance of thumbnail images. Three years ago it was common place to have exclusively text, but now a nice image is a requirement. As such the process of implementing the image needs...
31 Oct 2013

WordPress – Estimated Reading Time

I have a theme coming out soon that displays the ‘estimated reading time’ for each blog post on the homepage.The theme is inspired by the new blogging service Medium – but I first saw the idea mentioned on Brian Crays...
29 Nov 2012

CSS Highlight Colour

When I design a website I really like to add small touches that most people won’t notice. In fact there’s a blog I follow that is dedicated to these small areas of delight. One of the things I like to...