PlumTube v1.0

This version of PlumTube uses a Javascript function call instead of data- attributes to set function options, and is compatible with jQuery 1.2.3 and higher.

or check out the latest version.

Installation

1. Load your jQuery library (1.2.3 or higher) of choice, followed by the PlumTube script.

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src="js/plumtube.min.js"></script>

2. Create the container element where you want the YouTube feed to generate, and assign it a unique id attribute for PlumTube to target. Insert a fallback link to the content you are pulling into the YouTube feed. This link will only display if Javascript is not enabled on the user's browser.

   <div id="youtube-feed"><a href="http://www.youtube.com/koryphaios">Watch my videos on YouTube.</a></div>

3. Call the PlumTube function. At minimum, you must specify the name of the container element in which you want the feed to appear and either a YouTube username or playlist id.

   $(document).ready(function(){
   	plumTube({
   		user: 'koryphaios',
   		container: 'youtube-feed'
   	});
   
   	//or
   
   	plumTube({
   		playlist: 'PL487F75FE33618227',
   		container: 'playlist-feed'
   	});
   });
   			

Need help selecting the right options? Check out the PlumTube Code Generator.

Options

largeThumb

boolean: Inserts the larger version of the thumbnail image (480px by 360px) into the link list. Default is false (inserts 120px by 90px thumbnail image).

maxResults

integer: Defines the maximum number of videos to be pulled into the feed. Default is 10.

modal

boolean: If true, feed list links will direct to video embed URL instead of YouTube page URL for that video. This link format works with modal popup or other custom embed scripts, such as fancybox. Default is false.

modalOptions

object: Defines additional URL parameters to be added to video embed URL. modal must be true in order for parameters to be appended to URL. Each parameter you wish to append to the URL should be added as another parameter to the modalOptions object.

plumTube({
	playlist: 'PL487F75FE33618227',
	container: 'playlist-feed',
	modal: true,
	modalOptions: {
		controls: 0,
		wmode: 'transparent'
	}
});
//returns "http://www.youtube.com/embed/VIDEO_ID?controls=0&wmode=transparent" for each video

newWindow

boolean: Sets "target='_blank'" on feed links. Default is false.

showThumb

boolean: Show image thumbnail link. If false, feed will load plain text link to each video (with the video name as the link text). Default is false.

showTitle

string ('link' || 'text'): Adds the title of each video to its respective list item. 'text' inserts the title as plain text. 'link' inserts the title as a link with the same href as the video thumbnail link. Default is undefined (no title will show with thumbnail).

Examples

//generates links to the video YouTube pages
plumTube({
	container: 'youtube-feed',
	largeThumb: false,
	maxResults: 12,
	modal: false,
	showTitle: 'link',
	user: 'koryphaios'
});

//generates embed for use with modal plugin
plumTube({
	container: 'playlist-feed',
	largeThumb: true,
	maxResults: 5,
	modal: true,
	modalOptions: {
		controls: 0,
		wmode: 'transparent'
	},
	newWindow: true,
	playlist: 'PL487F75FE33618227'
});