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:
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"> </div>
</div>