Displaying a Vimeo Feed with jQuery
This code no longer works. You can find a revised blog post here.
Trying to figure out how to display a Vimeo feed was a little harder than the other tasks (Twitter, YouTube, and Flickr) we’ve covered so far.
I stumbled upon Ashley Ford’s blog, Using the Vimeo API, which had exactly what I needed. His code showed more information than I needed. He didn’t require jQuery in his code, however, when I made my modifications, I added jQuery so that I could take advantage of its syntax.
Going through the motions
Download the latest version of jQuery and link it to your site. This should be a no brainer now. 
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
K.I.S.S.
I’m going to keep this as simple as possible.
Include the following JavaScript under your jQuery line.
$(document).ready(function () {
<strong>init_vimeo();</strong>
});
<
em>// Change this to your username to load in your clips</em>
var vimeoUserName = 'user257977';
<
em>// Tell Vimeo what function to call</em>
var userInfoCallback = 'userInfo';
var clipsCallback = 'showThumbs';
<
em>// Set up the URLs</em>
var userInfoUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/user_info.json?callback=' + userInfoCallback;
var clipsUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/clips.json?callback=' + clipsCallback;
<
em>// This function goes through the clips and puts them on the page</em>
<strong>function showThumbs(clips)</strong> {
var thumbs = document.getElementById('thumbs');
thumbs.innerHTML = '';
var ul = document.createElement('ul');
thumbs.appendChild(ul);
for (var i = 0; i < clips.length; i++) {
var thumb = document.createElement('img');
thumb.setAttribute('src', clips[i].thumbnail_medium);
thumb.setAttribute('alt', clips[i].title);
thumb.setAttribute('title', clips[i].title);
var a = document.createElement('a');
a.setAttribute('href', clips[i].url);
a.setAttribute('target', clips[i], '_blank');
a.appendChild(thumb);
var li = document.createElement('li');
li.appendChild(a);
ul.appendChild(li);
}
<strong>}</strong>
<
em>// This function loads the data from Vimeo</em>
<b>function init_vimeo()</b> {
var head = document.getElementsByTagName('head').item(0);
var userJs = document.createElement('script');
userJs.setAttribute('type', 'text/javascript');
head.appendChild(userJs);
var clipsJs = document.createElement('script');
clipsJs.setAttribute('type', 'text/javascript');
clipsJs.setAttribute('src', clipsUrl);
head.appendChild(clipsJs);
<strong>}</strong>
Use this line or something similar in your HTML. — If you do go with something different, make sure you make the changes in your JavaScript.
<div id="vimeo">
<div id="videos"></div>
<div id="thumbs">Loading videos...</div>
</div>
All you need to do to make it work for you is to change the Vimeo username ID (var vimeoUserName = 'user257977';). Your video thumbnails can be styled within your CSS.
Done! Next!