Each YouTube video has four generated images. They are predictably formatted as follows:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg
The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (i.e., one of 1.jpg
, 2.jpg
, 3.jpg
) is:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
For the high quality version of the thumbnail use a URL similar to this:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
There is also a medium quality version of the thumbnail, using a URL similar to the HQ:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
For the standard definition version of the thumbnail, use a URL similar to this:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg
For the maximum resolution version of the thumbnail use a URL similar to this:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg
All of the above URLs are available over HTTP too. Additionally, the slightly shorter hostname i3.ytimg.com
works in place of img.youtube.com
in the example URLs above.
Alternatively, you can use the YouTube Data API (v3) to get thumbnail images.
It appears that the Youtube iframe API is currently broken, though I've seen no official confirmation yet.
See also:
onReady callback not firing when having the iframe explicitly written inside a template
YouTube API onPlayerReady not firing
Edit: Here is the fix: https://code.google.com/p/gdata-issues/issues/detail?id=5670#c6
Here is a direct quote of the answer at the link above:
A quick fix is to add in the origin=http://www.example.com (replace
with your servers full domain; make sure you use http:// or https://
as appropriate for your site) to the src= attribute of the player's
iframe element. Please make sure that the origin= attribute's value
exactly matches the host domain and URL scheme. E.g.
<iframe
type="text/html"
width="640"
height="480"
src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com"
frameborder="0">
</iframe>
I'm currently working with the engineering team to figure out whether
origin= is going to be required moving forward or whether this new
requirement can be reverted, but this is the immediate fix. Apologies
for the breakage and lack of advanced communication in the meantime.
If you use the YT.Player() constructor to create the iframe element
for you then this isn't be an issue—it's a bit of an edge case for
developers who are explicitly including the iframe element as part of
their page's HTML.
I implemented the fix above, and it worked for me.
Best Answer
There was a temporary issue with the iFrame Player API (which was fixed in June 2013) that you can read about here: https://code.google.com/p/gdata-issues/issues/detail?id=4706
Jeff Posnick posted a temporary workaround here: http://jsfiddle.net/jeffposnick/yhWsG/3/
As a temporary fix, you just need to add the event listener within the onReady event:
Make sure to remove the onStateChange event from the YT.PLAYER constructor (see the jsfiddle).
Also, as someone mentioned on the Google Code Issue Thread, you set an interval and poll the player for its current state instead of listening for the onStateChange event. Here is an example code snippet for doing that:
Firefox and IE Issues
Other people have mentioned that Firefox will not instantiate the YouTube Player if it is placed in a container with the css property
display: none
. Internet Explorer will also not work withvisibility: hidden
. If you're finding this to be the issue, try positioning the container off the page with something likeleft: -150%
.Steve Meisner talks about this here: YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?
And another related SO question: YouTube iframe API - onReady and onStateChanged events not firing in IE9
Edit: I've edited this answer to be more thorough because people are still seeing this error after the original bug was fixed in 2013.