wordpress display youtube video thumbnail

For displaying youtube video thumbnail on your website or wordpress blog either you have to use Youtube’s Video API or there is one simple technique to display youtube video thumbnail on your website.

Display Youtube thumbnail on website

https://img.youtube.com/vi/VIDEO_ID/#.jpg

You can download thumbnail of any video from youtube using this url format.

VIDEO_ID : is id of the video.
#.jpg : (1.jpg,2.jpg,or 3.jpg)

Default Thumbnail Image, Full-Size (480×360)

https://img.youtube.com/vi/rNWeBVBqo2c/0.jpg
Video Id= rNWeBVBqo2c

1] Thumbnail Image, Small (120×90)

https://img.youtube.com/vi/rNWeBVBqo2c/1.jpg
Video Id= rNWeBVBqo2c

2] Thumbnail Image, Small (120×90)

https://img.youtube.com/vi/rNWeBVBqo2c/2.jpg
Video Id= rNWeBVBqo2c

WordPress Shortcode to Display Youtube Thumbnail

Add following lines of codes in your themes functions.php file to add shorcode code

/*
	Shortcode to display youtube thumbnail on your wordpress blog.
	Usage:
	[youtube_thumb id="VIDEO_ID" img="0" align="left"]
	VIDEO_ID= Youtube video id
	img=0,1,2 or 3
	align= left,right,center
*/
function wp_youtube_video_thumbnail($atts) {
     extract(shortcode_atts(array(
	      'id' => '',
	      'img' => '0',
	      'align'=>'left'
     ), $atts));
	$align_class='align'.$align; 
	return '<img src="https://img.youtube.com/vi/'.$id.'/'.$img.'.jpg" alt="" class="'.$align_class.'" />';
}
add_shortcode('youtube_thumb', 'wp_youtube_video_thumbnail');

To display Youtube thumbnail on your blog add following shortcode in your wordpress posts/pages

[youtube_thumb id=”rNWeBVBqo2c” img=”0″ align=”center”]

which will display image like this

id= Your Video Id
img= 0,1,2,3 any value
align= left,right or center

Some other Examples

[youtube_thumb id=”rNWeBVBqo2c” img=”1″ align=”left”]
[youtube_thumb id=”rNWeBVBqo2c” img=”2″ align=”right”]
[youtube_thumb id=”rNWeBVBqo2c” img=”3″ align=”center”]