Vimeo provides a full-featured set of APIs to retrieve data from user's profiles. The most used API is the oEmbed API. We can use this API to retrieve our latest video as a JSONP object with jQuery.
All we need to get our video is our user ID (not our username):
(function ($) {
$.fn.vimeo = function (options) {
var settings = {
userid: '60155042'
};
options = $.extend(settings, options);
var requestURL = 'http://vimeo.com/api/oembed.json?url=http://vimeo.com/' + options.userid + '&callback=?';
var get = function(element) {
var html = '<div class="vimeo-video">';
$.getJSON(requestURL, function (json) {
html += '<h2>' + json.title + '</h2>';
html += '<p>' + json.description + '</p>';
html += json.html;
html += '</div>';
element.html(html);
});
};
return this.each(function () {
var $element = $(this);
get($element);
});
};
})(jQuery);
$(function () {
$('#wrapper').vimeo();
});
The returned JSON object is as follows:
({
"type": "video",
"version": "1.0",
"provider_name": "Vimeo",
"provider_url": "http:\/\/vimeo.com\/",
"title": "Parallax site tested on iPad iOS6",
"author_name": "Gabriele Romanato",
"author_url": "http:\/\/vimeo.com\/gabrieleromanato",
"is_plus": "1",
"html": "<iframe src=\"http:\/\/player.vimeo.com\/video\/60155042\" width=\"468\" height=\"640\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen><\/iframe>",
"width": 468,
"height": 640,
"duration": 87,
"description": "A jQuery-based parallax site tested on iPad without creating a specific mobile version.",
"thumbnail_url": "http:\/\/b.vimeocdn.com\/ts\/418\/123\/418123816_295.jpg",
"thumbnail_width": 295,
"thumbnail_height": 403,
"video_id": 60155042
})
[view-example url="http://jsfiddle.net/gabrieleromanato/gw6MQ/"]
