jQuery Google Search Videobar

Introduction

The Google Search Videobar functionality can easily be added to a division. It displays a set of video links based on provided search terms. The default search term is 'jquery'.

Google places some restrictions on your use of this service, including obtaining a key specific to a target URL providing the service, making the Web site freely accessible, and showing included Google branding. See the link above for more details.

You can also remove the GSVideobar widget if it is no longer required.

Default videobar: Remove

 

$('#defaultVideobar').gsvideobar();

$('#removeVideobar').toggle(
	function() {
		$(this).text('Re-attach');
		$('#defaultVideobar').gsvideobar('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultVideobar').gsvideobar();
	}
);

You can override the defaults globally as shown below:

$.gsvideobar.setDefaults({horizontal: true});

Processed fields are marked with a class of hasGSVideobar and are not re-processed if targetted a second time.

Formatting Options

You have some control over the appearance of the videobar.

Formatting: Close text Orientation Horizontal Vertical

  Thumbnails Small Medium Results Few Many

 

$('#formatVideobar').gsvideobar();
		
var thumbnails = [$.gsvideobar.thumbnailsSmall, $.gsvideobar.thumbnailsMedium];
		
$('#format input,#format select').change(function() {
	$('#formatVideobar').gsvideobar('change',
		{closeText: $('#close').val(),
		horizontal: $('#orientation').val() == 'true',
		thumbnailSize: thumbnails[$('#thumbnails').val()],
		manyResults: $('#results').val() == 'true'});
});

Player Options

The default is a floating video player, appearing next to the videobar. Alternately, you can provide the jQuery selector or object for a container to hold the player somewhere else on the page. You can also set the player's size in your own CSS.

#playerArea .playerInnerBox_gsvb .player_gsvb { width: 400px; height: 200px; }

Recommended sizes maintain a 4:3 aspect ratio, with widths over 300px gaining an extra 20px in height. For example:

• 180 x 135px - small player
• 260 x 195px - medium player
• 320 x 260px - large player
• 480 x 380px - extra large player

Inline player:

 

$('#playerVideobar').gsvideobar({player: '#playerArea'});

Multiple Videobars

You can connect multiple videobars to the one player. Connect the first videobar to the player area, then mark other videobars as "slaves" to the original "master".

Multiple videobars:

 

 

 

$('#masterVideobar').gsvideobar({search: 'australia', player: '#sharedArea'});
$('#slaveVideobar').gsvideobar({search: 'cats', master: '#masterVideobar'});

Cycling Searches

You can set the videobar up to cycle automatically through a set of search terms, with control over the interval between cycles and the order. Just pass an array of search terms when attaching the videobar.

Connect a status area to the videobar to show all the search terms, indicating which is currently being used and allowing the user to change to another term.

Cycling: Time (secs) Very short (3) Short (10) Medium (15) Long (30) Mode Random Linear

 

 

$('#cycleVideobar').gsvideobar({statusArea: '#cycleStatus',
	search: ['jquery', 'australia', 'cats', 'tennis']});
	
var times = [$.gsvideobar.cycleVShort, $.gsvideobar.cycleShort,
	$.gsvideobar.cycleMedium, $.gsvideobar.cycleLong];
var modes = [$.gsvideobar.cycleRandom, $.gsvideobar.cycleLinear];
		
$('#cycle select').change(function() {
	$('#cycleVideobar').gsvideobar('change',
		{cycleTime: times[$('#cycleTime').val()],
		cycleMode: modes[$('#cycleMode').val()]});
});

Custom Search

You can provide preset links or free text entry to generate new video searches by using the 'search' command.

Searchable videobar: Preset jQuery Australia Cats Tennis OR

  Freeform Search

 

$('#searchVideobar').gsvideobar();
		
$('#presetTerm').change(function() {
	$('#searchVideobar').gsvideobar('search', $(this).val());
});
		
$('#doSearch').click(function() {
	$('#searchVideobar').gsvideobar('search', $('#searchTerm').val());
});

YouTube Specifics

Within YouTube you can find specific feeds, optionally within a time period. Or you can target a particular channel, and optionally search for terms.

YouTube feeds: Feed Most viewed Recently featured Top rated Within None TodayThis week This month All time

   OR

  Channel

  Keywords Search

 

$('#youtubeVideobar').gsvideobar({search: $.gsvideobar.ytMostViewed});
		
var feeds = [$.gsvideobar.ytMostViewed,
	$.gsvideobar.ytRecentlyFeatured, $.gsvideobar.ytTopRated];
var periods = ['', $.gsvideobar.ytToday, $.gsvideobar.ytThisWeek,
	$.gsvideobar.ytThisMonth, $.gsvideobar.ytAllTime];
		
$('#youtube select').change(function() {
	$('#youtubeVideobar').gsvideobar('search',
		feeds[$('#ytFeed').val()] + periods[$('#ytPeriod').val()]);
});

$('#ytSearch').click(function() {
	$('#youtubeVideobar').gsvideobar('search',
		$.gsvideobar.youTube($('#ytChannel').val()) +
		' ' + $('#ytKeywords').val());
});

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).gsvideobar({
	horizontal: true, // True for horizontal display, false for vertical
	thumbnailSize: this.thumbnailsMedium, // The size of the video thumbnails
	player: '', // jQuery selector, jQuery object, or element
		// for the player area, or '' for a floating player
	master: '', // jQuery selector, jQuery object, or element
		// for the master videobar on the same page
	closeText: '', // Text displayed at the top of the player to close it
	search: 'jquery', // Single or list of search terms
	manyResults: false, // True for many results, false for only a few
	cycleTime: this.cycleMedium, // Time between cycles of the search terms
	cycleMode: this.cycleRandom, // Mode of cycling through the search terms
	statusArea: '' // jQuery selector, jQuery object, or element for a status area
});