April 10, 2014 / IST / How-to Guides, Web Development.

Are you planing to design a video blogging theme. I have a trick to embed Youtube video with   thumbnail automatic. When you embed Youtube video, problem is that you have to set thumb nail by uploading a image of video. For this you save video’s thumbnail form Youtube then upload via media uploader. This trick can solve your problem ans save your time.

First you have to understand, how youtube generates thumbnail.

Youtube generates four thumbnail for every video. 0.jpg, 1.jpg,2.jpg and 3.jpg. 0.jpg is large size thumbnail and 1.jpg, 2.jpg and 3.jpg is small size thumbnail.  Youtuve saves all thumbnail in img.youtube.com.

They are predictably formatted as follows:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

The default thumbnail image is:

http://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:

http://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:

http://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:

http://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:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

All of the above urls are available over https too. Just change http to https in any of the above urls. Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example urls above.

Please enter Youtube video <insert-youtube-video-id-here>

How to use this concept in WordPress.

Open a Youtube video and copy video id. Example:

youtube-first-video

Create a Custom Field named youtube_id.  Enter video id and publish your post.

Read also : How to use Custom Field in WordPress

Now, all you need to do is replace your WordPress Loop with this code or in all php page in template except single.php because we use an another code in single.php.

<?php
if (have_posts()) :
	while (have_posts()) : the_post();
		$video_id = get_post_meta($post->ID, 'youtube_id', true); ;
		if (!empty($video_id)){
			the_title();
			echo "<a href=".get_permalink.">";
			echo "<img src=\"http://img.youtube.com/vi/$video_id/default.jpg\"/>";
			echo "</a>";
			the_content();
		}
		else{
			the_title();
			the_content();
		}
	endwhile;
endif;
?>

You can replace default.jpg to 0.jpg, 1.jpg, 2.jpg, 3.jpg, hqdefault.jpg, mqdefault.jpg, sddefault.jpg or maxresdefault.jpg.

Above code display video thumbnail with post link. Now move to single.php. In this code we embed that video with php code. Change default loop with this code.

<?php
if (have_posts()) :
	while (have_posts()) : the_post();
		$video_id = get_post_meta($post->ID, 'youtube_id', true); ;
		if (!empty($video_id)){
			the_title();
			echo "<iframe width=\"640\" height=\"360\" src=\"//www.youtube-nocookie.com/embed/$video_id/?rel=0&autoplay=1\" frameborder=\"0\" allowfullscreen></iframe>";
			the_content();
		}
		else{
			the_title();
			the_content();
		}
	endwhile;
endif;
?>

Above code puts youtube video with iframe.

Now you can turn your blog to Video Blog.