Posted 12.07.2009

Displaying a Vimeo Feed with jQuery

UPDATE JUNE 6, 2013
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. grin


<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 
0clips.lengthi++) {
        
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 
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!



  • aramtch

    realizing of course that this is a rather old post smile I can’t get it to work… no errors or anything – it just hangs on “loading videos”. Am i missing anything – or does this code not work anymore. thanks!