<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>TEST: YouTube Thumbs</h2>
<p class="lead">
Each YouTube video has 4 generated images.
<sup><a href="http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api">Ref.</a></sup>
<p>
<a href="http://youtubethumbnailgenerator.blogspot.ca">YouTube Thumb Generator</a>
</p>
<p>
They are predictably formatted as follows:
</p>
<img src="http://img.youtube.com/vi/zJahlKPCL9g/1.jpg" class="img-responsive img-rounded center-block" alt="">
<br>
<img src="http://img.youtube.com/vi/zJahlKPCL9g/2.jpg" class="img-responsive img-rounded center-block"alt="">
<br>
<img src="http://img.youtube.com/vi/zJahlKPCL9g/3.jpg" class="img-responsive img-rounded center-block" alt="">
<br>
<img src="http://img.youtube.com/vi/zJahlKPCL9g/default.jpg" class="img-responsive img-rounded center-block" alt="">
<br>
<img src="http://img.youtube.com/vi/zJahlKPCL9g/hqdefault.jpg" class="img-responsive img-rounded center-block" alt="">
<br>
<img src="http://img.youtube.com/vi/zJahlKPCL9g/mqdefault.jpg" class="img-responsive img-rounded center-block" alt="">
<br>
<img src="http://img.youtube.com/vi/zJahlKPCL9g/0.jpg" class="img-responsive img-rounded center-block" alt="">
<br>
<p class="lead">
The first one in the list is a full size image and others are thumbnail images.
</p>
<p>The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:
</p>
<code>
</code>
<pre>
For the high quality version of the thumbnail use a url similar to this:
http://img.youtube.com/vi/zJahlKPCL9g/hqdefault.jpg
There is also a medium quality version of the thumbnail, using a url similar to the HQ:
http://img.youtube.com/vi/zJahlKPCL9g/mqdefault.jpg
For the standard definition version of the thumbnail, use a url similar to this:
http://img.youtube.com/vi/zJahlKPCL9g/sddefault.jpg
For the maximum resolution version of the thumbnail use a url similar to this:
http://img.youtube.com/vi/zJahlKPCL9g/maxresdefault.jpg
</pre>
<hr>
</div>
</div>
