Vimeo API - Gallery

Vimeo API Gallery

This widget can be found here on the Shadow Mountain website. Shadow Mountain needed a simple way to display the last 6 videos in each of their Vimeo channels. I did some digging around on the Vimeo API and found this example at github (viewable example here) and made a couple of modifications per our needs.

  • I altered the code to work with a Vimeo channel instead of a whole vimeo account.
  • I changed the viewing structure to look more polished.
  • Since I changed up the viewing structure, I added a jQuery function to make the screen pop up back to the video. The could scroll down too far and not notice that video has been updated.
  • I added another function to make the video play on click of the thumbnail.

As I said, the complete working version can be seen here. Feel free to check it out and use it on your own website.

Here is the javascript I used to get it going below. Keep in mind that I am linking to jQuery 1.4.2 to get this working.


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

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

function getVideo(url) {
 $.getScript(oEmbedEndpoint + "?url=" + url + "&width=610&height=339&callback=" + oEmbedCallback);
}

function setupGallery(videos) {
 // Load the first video
 getVideo(videos[0].url);
 
 // Add the videos to the gallery
 for (var i = 0; i < 5; i++) {
 var html = '<li><a href="' + videos[i].url + '&autoplay=1"><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;
 });

 $("#thumbs a").click(function (){
 //$(this).animate(function(){
 $("html, body").animate({
 scrollTop: $("#embed").offset().top
 }, 0);
 //});
 });
}

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

Here is the html.

<div id="wrapper">
 <div id="embed"></div>
 <div id="thumbs">
 <ul>
 </ul>
 </div>
</div>

Posted | Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts

Search