Vimeo Video Gallery

Vimeo.com is an excellent service for uploading your sermons and full worship services to for viewing. They are very affordable and have a great exposure for people to find your videos online. The instructions here are for developing a video gallery inside of your FinalWeb website. These instructions can be adapted for a number of different hosting platforms.

You can manually use a Vimeo or YouTube gadget that is built into FinalWeb, but this Javascript will load automatically from the Vimeo.com Application Programmers Interface (API) service your latest videos. Videos can be played directly from this page as well.

In the Faith Lutheran (River Falls, WI) website (pictured to the right) you will see the Video Gallery that has a text section at the top to describe the page. Then the second section is the gallery, this is a text object by itself separate from the title section. You could just put the code in the same text block, but I find in FinalWeb it is much safer to separate the blocks. If something goes wrong then it is isolated to the single block. You can also create a column with a section on the left or right, or add another closing section below the gallery.

How To Instructions:

The video gallery is easily assembled through Javascript that has been derived from the Vimeo API code. FinalWeb instructions for adding the text block and code to your page:

1. Begin your web page that you want to add the gallery onto, or use an existing page.
2. In the administrative toolkit on the right hand site click on "Add Section" to open the Page Components options.
3. Drag the "Text\ImageBlocks" onto your web page.Choose "No Image" when asked about what form of text/image block you wan to add to the page.
4. Click on the [Source] button in the upper left hand corner of the editor.
5. Paste in the green text from below. This is the Javascript that will run on your web page and it will be what is making contact between your user's browser and Vimeo.com for the videos.
6. Edit the vimeoUsername option from the source code, this should point at your Vimeo account. you can start with the default to make sure the page is loading OK if you want. You can refer to a user, group or channel; see the API documentation for more details.
7. Click [Source] again to un-toggled the button and go back to the normal editing mode.
8. Click Save Changes to save the web page back to the server.

Sometimes the website will not load at this point, open the web page in another browser session or tab to view it. This happens because there are oodles of different scripts FinalWeb provides on the pages for editing purposes, sometimes these can adversely interact with each other.

If you are handy with CSS, you can make changes to the style section to format it better into your website. There are also a number of Vimeo arguments you can tweak to make the player work better on your specific site. This text returns as many videos as the API returns, you can change the parsing of the for (var i = 0; i < videos.length; i++) line to adjust for that if you want less videos to return.

Javascript to Copy and Paste into the FinalWeb Text Editor:

<style type="text/css">.thumb { border: 0; float: left; height: 100px; background: url(http://a.vimeocdn.com/thumbnails/defaults/default.75x100.jpg); margin-right: 10px; } 

#embed { background-color: #E7E7DE; width: 600px; align-items: center; padding: 10px; }

#portrait { float: left; margin-right: 5px; max-width: 100px; }

#stats { clear: both; margin-bottom: 20px; }

section {

width:350px;

float:left;

padding:10px;

}

</style>

<script>

// CHANGE THE vimeoUsername VALUE ON THE NEXT LINE TO YOUR SITE

// 'channel/jbf' is Justified By Faith at River Falls, WI

// you an have a user/ or a channel/ to reference

// refer to Vimeo API documents for your detailed URL (JSON)

var vimeoUsername = 'channel/jbf';

// Do Not change below this line

var apiEndpoint = 'http://vimeo.com/api/v2/';

var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'

var oEmbedCallback = 'switchVideo';

var videosCallback = 'setupGallery';

// Get the user's videos

$(document).ready(function() {

$.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback);

});

function getVideo(url, playVideo) {

$.getScript(oEmbedEndpoint + '?url=' + url + '&width=600&autoplay='+ playVideo +'&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, 'false');

// Add the videos to the gallery

for (var i = 0; i < videos.length; i++) {

var html = '<SECTION><P><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';

html += '</p>' + videos[i].title + '</a><BR><P style="font-size: 10px;">' + videos[i].description + '</P></SECTION>';

$('#thumbs').append(html);

}

// Switch to the video when a thumbnail is clicked

$('#thumbs a').click(function(event) {

event.preventDefault();

getVideo(this.href,'true');

return false;

});

}

function switchVideo(video) {

$('#embed').html(unescape(video.html));

}

</script>

<div id="wrapper">

<div id="embed">Please wait for video player to load...</div>

<div id="thumbs">&nbsp;</div>

</div>