info@snilesh.com
Google Plus Twitter Facebook RSS Linkedin

wordpress display youtube video thumbnail

Home » Blog » wordpress display youtube video thumbnail

August 30th, 2011Wordpress11 Comments »
0

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


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)


img.youtube.com/vi/rNWeBVBqo2c/0.jpg

Video Id= rNWeBVBqo2c

spacer

1] Thumbnail Image, Small (120×90)


img.youtube.com/vi/rNWeBVBqo2c/1.jpg

Video Id= rNWeBVBqo2c

spacer

2] Thumbnail Image, Small (120×90)


img.youtube.com/vi/rNWeBVBqo2c/2.jpg

Video Id= rNWeBVBqo2c

spacer

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="/img/spacer.gif"> 

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
spacer

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"]

Tags: youtube, youtube shortcode, youtube shortcode thumbnail, youtube thumbnail, youtube wp thumb
« Angry Anna Online Game
Google Plus WordPress Plugins »

11 Comments on "wordpress display youtube video thumbnail"

  1. spacer
    Alex says:
    September 1, 2011 at 9:33 pm

    Video image is not cached, right? It’s fetched each time the page loads?

    Reply →
  2. spacer
    Vivek Yadav says:
    December 8, 2011 at 1:20 am

    Well, @Alex Why you need to cache image when they are being served from youtube servers which are super fast and CDN based so in a way they’ll be a lot faster than caching them on your server !

    Reply →
  3. spacer
    rakesh says:
    December 24, 2011 at 6:45 pm

    it is good script

    Reply →

Trackbacks for this post

  1. How to display a thumbnail from a Youtube using a shortcode | WordPress Themes, Plugins, Hacks, Guides
  2. Hiện Ảnh Thumbnail Của Video YouTube Sử Dụng ShortCode
  3. How to display a thumbnail from a Youtube using a shortcode
  4. Youtube Resimlerini Çekme – Wordpress | Samedus
  5. WORDPRESS HOSTING NEWS » wordpress thumbnail » WORDPRESS HOSTING NEWS
  6. Hiện Ảnh Thumbnail Của Video YouTube Sử Dụng ShortCode
  7. How to Display a Thumbnail from a Youtube Using a Shortcode « Blogging Secret
  8. Display Thumbnail´s From Youtube Video´s | Mypixel.se

Got something to say? Go for it!

Click here to cancel reply.

This month, I'm learning jQuery with @TutsPremium: t.co/FWo6XBUC - 1 day ago

All Tweets
spacer
 
spacer
This month, I'm learning jQuery with @TutsPremium: t.co/FWo6XBUC1 day ago
spacer spacer spacer spacer spacer
spacer
Tweet
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.