Welcome to PlumTube!

PlumTube utilizes the combined power of jQuery and YouTube API v2.0 video feeds to generate an list of links to videos on a particular YouTube channel or playlist. The output is a clean unordered list element that can be styled as desired, and can also support the addition of modal popup player functionality from plugins such as fancybox.

Download PlumTube v2.0

Installation

Load your jQuery library of choice (as long as your choice is jQuery 1.6.0 or higher), followed by the PlumTube script. For older jQuery libraries, use PlumTube v1.0.
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/plumtube.min.js"></script>
```
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="yt-feed"><a href="http://www.youtube.com/koryphaios">Watch my videos on YouTube.</a></div>
```
Add the appropriate data attributes to your container element. At minimum, you must include both the data-plumtube attribute and either the data-plum-user (for videos from a particular channel) or data-plum-playlist (for videos from a specific playlist) attribute.
```
<div id="yt-feed" data-plumtube data-plum-user="koryphaios"><a href="http://www.youtube.com/koryphaios">Watch my videos on YouTube.</a></div>
```

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

Attributes

data-plum-large-thumb: 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).
data-plum-max-results: integer: Defines the maximum number of videos to be pulled into the feed. Default is 10.
data-plum-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.
data-plum-modal-options: object: Defines additional URL parameters to be added to video embed URL. data-plum-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 data-plum-modal-options object. Note that the attribute itself should be wrapped in single quotes, and each parameter within the attribute object should be wrapped in double quotes.

For example, data-plum-modal-options='{"controls":0, "autoplay":1}' returns "http://www.youtube.com/embed/VIDEO_ID?controls=0&autoplay=1" for each video.
data-plum-new-window: boolean: Sets "target='_blank'" on feed links. Default is false.
data-plum-show-thumb: 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 true.
data-plum-show-title: 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-->
		
<div id="youtube-feed" data-plumtube data-plum-max-results=12 data-plum-show-title="link" data-plum-user="koryphaios"><a href="//www.youtube.com/koryphaios">See all of Plum's videos.</a></div>

See all of Plum's videos.

<!--generates embed links for use with modal plugin-->
		
<div id="playlist-feed" data-plumtube data-plum-playlist='PL487F75FE33618227' data-plum-max-results=5 data-plum-large-thumb='true' data-plum-modal='true' data-plum-modal-options='{"controls":0, "autoplay":1}' data-plum-new-window='true'><a href="//www.youtube.com/watch?v=NfcCyQRw1dU&list=PL487F75FE33618227">See all of Plum's Cinema Muhlenberg videos.</a></div>

See all of Plum's Cinema Muhlenberg videos.