4

I have a WordPress site in which I am inserting video embed code in the post editor. In the front end I need to show the video Thumbnail on click on them it will show the video in lightbox.

The requirement is that, I need to show the video thumbnail of the videos I have given in the editor.

I will use YouTube and vimeo embed code and if it is other video then I will show post thumbnail, or a default image.

I will use one video embed code per posts.

Thanks in advance.

user1606066
  • 41
  • 1
  • 1
  • 3
  • have you tried looking at the youtube/video apis to get the thumbnail? – Ben Rowe Aug 17 '12 at 06:42
  • 2
    "How to get thumbnail of YouTube video link using YouTube API?" http://stackoverflow.com/questions/2068344/how-to-get-thumbnail-of-youtube-video-link-using-youtube-api – msanford Aug 18 '12 at 05:24

4 Answers4

9

Using Youtube API 

http://img.youtube.com/vi/VIDEO_ID/#.jpg
where,
VIDEO_ID = bQVoAWSP7k4
# = 1,2, or 3

Using Vimeo API

Making Video Request

http://vimeo.com/api/v2/video/video_id.output

where, 
video_id :  The ID of the video you want information for.
output  :  Specify the output type. It currently offer JSON, PHP, and XML formats.

php code for vimeo:

$imgid = 6825415;
$image = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));
echo $image[0]['thumbnail_medium'];
Vinay
  • 2,564
  • 4
  • 26
  • 35
  • thanks for your reply. But I need to know how can I distinguish between vimeo and youtube video and get the thumbnail of that video – user1606066 Aug 18 '12 at 05:09
  • The # can also (and probably should) be `default`, 1, 2 and 3 being automatically generated and default being choosen by the maker of the video – Tofandel Oct 10 '21 at 14:42
5

Thumbnails you can load from video url.

VIDEO URL

http://www.youtube.com/watch?v=Xzf0rvQa4Mc

THUMBNAIL URL

http://i1.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

http://i2.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

http://i3.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

http://i4.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

It takes some time to replicate images to all thumbnails urls (maybe servers) for new videos.

If there is no thumbnail, it returns image with camera (exactly 893 bytes length).

EXAMPLE

    http://i4.ytimg.com/vi/Xzf0rvQa4Md/default.jpg

if you want to get yout tube video id like this

better with this 

regexp (youtube\.com\/(watch\?v=)?(v\/)?([\w\-]+))

it can handle both urls (with /v/ and with watch?v=) 

preg_match('/youtube\.com\/v\/([\w\-]+)/', $code, $match);

echo $match[3];
Abid Hussain
  • 7,724
  • 3
  • 35
  • 53
  • thanks for your reply. But I need to know how can I distinguish between vimeo and youtube video and get the thumbnail of that video – user1606066 Aug 18 '12 at 05:11
  • you see this url http://www.youtube.com/watch?v=Xzf0rvQa4Mc last query string is Xzf0rvQa4Mc id i have check in url regexp (youtube\.com\/(watch\?v=)?(v\/)?([\w\-]+)) and get id this code preg_match('/youtube\.com\/v\/([\w\-]+)/', $code, $match); and set id in this url http://i.ytimg.com/vi/8vZyIiXp4kg/default.jpg echo $match[3]; – Abid Hussain Aug 18 '12 at 09:32
  • not necessary 1 or 2 or 3 you use in after i (http://i) in url see this url http://i.ytimg.com/vi/8vZyIiXp4kg/default.jpg – Abid Hussain Aug 18 '12 at 09:36
1

If you would like to use thumbnail through pure js/jquery no api, you can use this tool to capture a frame from the video and voila!

http://video.depone.eu/

alphapilgrim
  • 3,761
  • 8
  • 29
  • 58
0

Try this Plugin which simplifies the process of automatically displaying video thumbnails in your WordPress template.

mpsbhat
  • 2,733
  • 12
  • 49
  • 105