Get Vimeo thumbnail for video using jQuery

Question

I've found similar questions but none of the answers show clearly and easily how to get a thumbnail for a vimeo video using jQuery and JSON. If anyone can help that would be great, here is what I've got but it shows nothing at the moment.

var vimeoVideoID = '17631561';
var videoCallback = 'showThumb';

$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=' + videoCallback,

function(data){
$(".thumbs").attr('src',data[0].thumbnail_large);
});

Thanks in advance.

Answer 1

I believe you're having the "same origin policy" issue. You should consider writing a server side script using something like "file_get_contents" or "fopen", enabling you to grab the data from vimeo, translate it to json, and output to your javascript with a nice ajax call.

If you would like to avoid using a server-side script you may use the data type JSONP.

var vimeoVideoID = '17631561';

$.getJSON('https://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
         $(".thumbs").attr('src', data[0].thumbnail_large);
});

Notice the URL is a bit different from how you are using it. The callback which you defined as a var is unnecessary. You're attaching the getJSON to a function directly, so you'll call the 'callback' in the url '?'. This informs the getJSON function to pass the successful data return to the supplied function.

You can test my code here. Hope it helps!

Answer 2

With the updated API, it would be...

$.getJSON('https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + id, {format: "json"}, function(data) {
  $(".thumbs").attr('src', data.thumbnail_url)
});

Answer 3

You can use this function which supports all types of Vimeo links & sizes:

function get_vimeo_thumbnail(url, size, callback)
{
    var result;
    if(result = url.match(/vimeo\.com.*[\\\/](\d+)/))
    {
        var video_id   = result.pop();
        if(size == 'small'){
            var video_link = encodeURIComponent("https://vimeo.com/" + video_id + "?width=480&height=360");
            $.getJSON('https://vimeo.com/api/oembed.json?url=' + video_link, function(data) {
                if(data && data.thumbnail_url){
                    if (typeof(callback) !== 'undefined') {
                        callback(data.thumbnail_url);
                    }
                }
            });
        }
        else
        {
            $.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json', function(data) {
                if(data){
                    if (typeof(callback) !== 'undefined') {
                        var thumbnail_src = data[0].thumbnail_large;
                        if(thumbnail_src){
                            callback(thumbnail_src);
                        }
                    }
                }
            });
        }
    }
}

To use it:

// Available sizes: large, small
get_vimeo_thumbnail('https://vimeo.com/475772381', 'large' function(url){
   alert(url)
})

Answer 4

Please check out this page; Vimeo has a new method call oEmbed as Vimeo is now pushing it's new oEmbed technology.

The method above, will fail on IE (no thumbs will be shown).