How do you display YouTube thumbnails instead of embedding the actual flash in Tumblr theme?

Question

I would like to display YouTube thumbnail images instead of embedding the actual flash player in a Tumblr theme. But as soon as people click on the image, it starts loading the flash player and play the video.

The reason is that if the front page has 10 YouTube videos, it really loads very slow because it is loading all the flash players. It is a lot faster to load the thumbnails.

Answer 1

You can get the thumbnail by using the {VideoThumbnailUrl} variable, It should show you the thumbnail assigned to the video. Using that along with {block:PermalinkPage}{/block:PermalinkPage} and {block:IndexPage}{/block:IndexPage} should get you the desired effect.

Wrap this in an image tag and you should be good to go, be aware that youtube thumbnails are letter-boxed so if that doesn't match your theme you will need to do just a little bit of work to hide them.

The most basic implementation of the video block would look a bit like this.

{block:Video}
    {block:PermalinkPage}
        {Video-700}
    {/block:PermalinkPage}
    {block:IndexPage}
        {block:VideoThumbnail}
            <img src='{VideoThumbnailURL}' />
        {block:VideoThumbnail}
    {block:IndexPage}
{/block:Video}