Darcy ClarkeDevelopment / Design / UX

Toggle Main Navigation

May 16, 2011

Get Image for Youtube or Vimeo Videos from URL

Posted in "development"

When you're building social applications it's always a good idea to include context relevant to certain information. This helps tie the experience together and makes things a lot nicer for the user. I find myself working on projects that need some sort of relevant screen shot of either the site or video someones linked to. This can be really nice for your users and is pretty simple to do.

I use a pretty standard/straightforward PHP script to get the screen shot from a Youtube or Vimeo video URL. The below is stripped down version which you can use in any of your applications.

The Code

function video_image($url){
    $image_url = parse_url($url);
    if($image_url['host'] == 'www.youtube.com' || $image_url['host'] == 'youtube.com'){
        $array = explode("&", $image_url['query']);
        return "http://img.youtube.com/vi/".substr($array[0], 2)."/0.jpg";
    } else if($image_url['host'] == 'www.vimeo.com' || $image_url['host'] == 'vimeo.com'){
        $hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/".substr($image_url['path'], 1).".php"));
        return $hash[0]["thumbnail_small"];
You'll notice that I try to determine whether the url passed to the function is either a Youtube or Vimeo link and do the proper calculations for either. You should probably add in a fallback, specific to your use case, if neither Vimeo or Youtube are found within the link passed.


## For Youtube

You can change the following line of code in my script to return a different size of Youtube image:
<pre class="brush:php">return "http://img.youtube.com/vi/".substr($array[0], 2)."/0.jpg";</pre>
There are variations of the thumbnails available based on the thumbs set by the user when uploading on Youtube. You can change the number to get a different screenshot. Incrementing the number on the end of the image will show you the next thumbnail available:
<pre class="brush:php">return "http://img.youtube.com/vi/".substr($array[0], 2)."/default.jpg"; // Small Default
return "http://img.youtube.com/vi/".substr($array[0], 2)."/0.jpg"; // Large Default
return "http://img.youtube.com/vi/".substr($array[0], 2)."/1.jpg";
return "http://img.youtube.com/vi/".substr($array[0], 2)."/2.jpg";
return "http://img.youtube.com/vi/".substr($array[0], 2)."/3.jpg";</pre>

## For Vimeo

You can change the following line of code in my script to return a different size of Vimeo image:
<pre class="brush:php">return $hash[0]["thumbnail_small"];</pre>
The variations available are:
<pre class="brush:php">`return $hash[0]["thumbnail_small"];
return $hash[0]["thumbnail_medium"];
return $hash[0]["thumbnail_large"];


The Vimeo & Youtube API's have a lot more information that you can pull including users avatars and so on. Hopefully this little script will help bring some nice context to your users instead of a dull static link.