Change Blogger YouTube Thumbnail Size

I just started playing with Blogger with my new blog. There's usually a lot of learning when experimenting with new technology or products. I thought it would be a good idea to share the learning & experience with the world. I picked the Galauness template designed by  iksandi after an hour of googling which is a nice minimalist template to get started with. The best thing I like about the template is it's simplicity. As you can see it has a nice & simple grid layout with sliding thumbs (achieved with few lines of Jquery) in the home page. It also displays the YouTube thumbnails if there's YouTube video embedded in the post. A quick look at the template code shows that the following function does the job:

<script>
function snips_image_creator(image_url,post_title)
{
var image_size=400;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBh-YrV_6tM59GNAYtFBW0s5v8ATBSIUIypvYaVhAimchEebmzPCdZLfchbrWGLj5MdggtsA_4Zt7ATii3eHPcR0NbZggX1bIMf0W36SSQgFI6LSO-DItemzTHZGlHtDi9u6aKVB7dCQ/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img alt="'+post_title+'" src="'+image_url.replace('/s72-c/','/w'+image_size+'/')+'" />';
if(image_url!="") return image_tag; else return "";
}
</script>

and the following code finally prints the output to the page:

<script>
document.write(
snips_image_creator("<data:post.thumbnailurl=".thumbnailurl">","<data:post.title=".title">")
);
</script>

As you might have already noticed it gets the post thumbnail URL by calling "data:post.thumbnailUrl" which is a layout data tag. More about available layout data tags look here. I'm not sure why post.thumbnailUrl is not documented though. Anyways, so in case of regular post images (uploaded to blogge/picasa) the URL would be something like this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBh-YrV_6tM59GNAYtFBW0s5v8ATBSIUIypvYaVhAimchEebmzPCdZLfchbrWGLj5MdggtsA_4Zt7ATii3eHPcR0NbZggX1bIMf0W36SSQgFI6LSO-DItemzTHZGlHtDi9u6aKVB7dCQ/w72/default.png

Notice the "w72" ,this value can be used to change the size of the image (and a lot more). More details about it here. So, that's how it works for regular post images. However, for YouTube thumbnails blogger returns the default thumbnail of the video. For example:

http://img.youtube.com/vi/wKJ9KzGQq0w/default.jpg

It's good enough for a thumbnail, but for the template I'm using I needed a bit larger image. Of-course, I can set manual width/height to the image but that's look ugly as the original size of the image is 120x90. The good part is YouTube provides another size 480x360 for the image (Check this post out for all supported thumbnail parameters YouTube). We just need to change the file name of the image from "default" to "0". For example:

http://img.youtube.com/vi/wKJ9KzGQq0w/0.jpg

Cool, so that's the size I needed. Next, I simply modified the snips_image_creator function a little bit. Here's what I did:

<script>
function snips(image_url, post_title) {
 var image_size = 600;
 var show_default_thumbnail = true;
 var default_thumbnail = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBh-YrV_6tM59GNAYtFBW0s5v8ATBSIUIypvYaVhAimchEebmzPCdZLfchbrWGLj5MdggtsA_4Zt7ATii3eHPcR0NbZggX1bIMf0W36SSQgFI6LSO-DItemzTHZGlHtDi9u6aKVB7dCQ/s72-c/default.png";
 if (show_default_thumbnail == true && image_url == "")
  image_url = default_thumbnail;
 image_tag = '<img src="' + image_url.replace('/s72-c/', '/w' + image_size + '/') + '" alt="' + post_title + '"/>';
 yimage_tag = '<img src="' + image_url.replace('default', '0') + '" alt="' + post_title + '"/>';
 if (image_url.indexOf("img.youtube.com")!= -1){
  return yimage_tag;
 }
 else if (image_url != "")
 {
 return image_tag;
 }
 else
 return "";}
</script>

So, basically it I added few lines of code to detect YouTube URL, find the keyword "default" in the URL and replace it with "0". That's it !