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


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)

Video Id= rNWeBVBqo2c

1] Thumbnail Image, Small (120×90)

Video Id= rNWeBVBqo2c

2] Thumbnail Image, Small (120×90)

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.
	[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) {
	      'id' => '',
	      'img' => '0',
     ), $atts));
	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”]

Leave a Reply

Your email address will not be published. Required fields are marked *

One Comment