Updated 11.25.2014

Step by Step Instructions for Displaying a Vimeo feed with jQuery

Prologue

A while back, I wrote a post on displaying a Vimeo feed using jQuery.

Recently, I had to do this for a client site. Knowing, I had written a blog post, I naturally, pulled up my blog post, so I could follow my own advice. (One of the good things about blogging = documenting your own process)

However, I quickly discovered, my code was outdated. None of it worked! Even the site that I referenced in my post, their code didn’t work! My Google Search returned my post as the top hit! — and any links after that were outdated too!

So, I wanted to update my content, using code that actually works (go figure).


The Actual Work

I found a code repository on GitHub that had everything I needed. So, download the code (direct link).

Vimeo Feed and jQuery Screenshot

You’ll see there are several examples for you to work from. No need to reinvent the wheel!

For the site I was working on, I neeed to display a featured video at the top with thumbnails beneath it. Within the simple-api folder, there’s a folder called gallery, then I grabbed the js-example.html file. It already has everything you need.

Displaying a Vimeo Feed - Finder

I copied the CSS out of the header, and placed it in my site’s CSS.

#thumbs { 
  height: 298px; 
  width: 300px; 
  border: 1px solid #E7E7DE; 
  padding: 0; 
  float: left;
  
    ul { 
      list-style-type: none; 
      margin: 0 10px 0; 
      padding: 0 0 10px 0;
      
      li { 
        height: 75px; 
      }
  }
}

.thumb { 
  border: 0; 
  float: left; 
  width: 100px; 
  height: 75px; 
  background: url(http://a.vimeocdn.com/thumbnails/defaults/default.75x100.jpg); 
    margin-right: 10px; 
}

#embed { 
  background-color: #E7E7DE; 
  height: 280px; 
  width: 504px; 
  float: left; 
  padding: 10px; 
}

#portrait { 
  float: left; 
  margin-right: 5px; 
  max-width: 100px; 
}
  
#stats { 
  clear: both; 
  margin-bottom: 20px; 
}

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.

I also copied the javascript and pasted it in my site’s JS folder. (Don’t forget to make sure you’re using jQuery).

var apiEndpoint = 'http://vimeo.com/api/v2/';
var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'
var oEmbedCallback = 'switchVideo';
var videosCallback = 'setupGallery';
var vimeoUsername = 'brad';

// Get the user's videos
$(document).ready(function() {
  $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback);
});

function getVideo(url) {
	$.getScript(oEmbedEndpoint + '?url=' + url + '&width=504&height=280&callback=' + oEmbedCallback);
}

function setupGallery(videos) {

	// Set the user's thumbnail and the page title
	$('#stats').prepend('<img id="portrait" src="' + videos[0].user_portrait_medium + '" />');
	$('#stats h2').text(videos[0].user_name + "'s Videos");

	// Load the first video
	getVideo(videos[0].url);

	// Add the videos to the gallery
	for (var i = 0; i < videos.length; i++) {
		var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';
		html += '<p>' + videos[i].title + '</p></a></li>';
		$('#thumbs ul').append(html);
	}

	// Switch to the video when a thumbnail is clicked
	$('#thumbs a').click(function(event) {
		event.preventDefault();
		getVideo(this.href);
		return false;
	});

}

function switchVideo(video) {
	$('#embed').html(unescape(video.html));
}

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.

Replace the vimeoUsername name with the vimeo user you’re trying to pull from.

Displaying a Vimeo Feed

Then, copy and paste the containers within the HTML, into yours. it’s important that you leave the id tags alone so that the JS can grab them…errr.. if you’re going to change them, change them within the JS file too. Also, make sure those tags don’t conflict with your existing DOM.

<div id="stats">
  <h2></h2>
	<div style="clear: both;"></div>
</div>
<div id="wrapper">
	<div id="embed"></div>
	<div id="thumbs">
		<ul></ul>
	</div>
</div>

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.

You should be good to go! — Unless of course, you want to restyle some elements (which is what I did). But, this will at least get you pointed in the right direction.

See the Pen 0f95ad9ca28dad9a3367d7a81dc6d55a by Amy Dutton (@ahaywood) on CodePen.


  • Serio

    Nice one, thanks!
    Do you have any idea on how to sort videos (by date, likes etc) in this case?
    Thanks again.
    s