jQuery youtube playlist plugin

jQuery youtube playlist plugin - youtubeplaylist

11 January 2010 Monday

This application was viewed 2474 times

0

For a recent client project, we wanted to be able to turn a list of YouTube links into a playlist. This would allow the client to manage their videos on YouTube and simply insert links to the videos on their site. With javascript enabled a nice playlist is created, whilst without javasript the user gets a regular list of links to youtube pages.

Demo showing the plugin with default options.

Using the plugin

The plugin acts on a simple unordered list containing links to YouTube videos, e.g.

1.<DIV class=yt_holder>

<DIV id=ytvideo></DIV> 
<UL class=demo1> 
    <LI><A href="http://www.youtube.com/watch?v=QBBWKvY-VDc">Video 1</A></LI> 
    <LI><A href="http://www.youtube.com/watch?v=ZXMQqLnRhRI">Video 2</A></LI> 
    <LI><A href="http://www.youtube.com/watch?v=Wvo-g_JvURI">Video 3</A></LI> 
</UL> 
</DIV>

 
$(function() { 
    $("ul.demo1").ytplaylist(); 
});

Plugin options

Option - (default)

holderId - (ytvideo)
The ID of the element (usually a div) into which the YouTube video will be inserted

playerHeight - (300)
The height of the embdedded youtube video

playerWidth - (450)
The width of the embdedded youtube video

addThumbs - (false)
Use true to add video thumbnails to each list item

thumbSize - (small)
Size of added thumbnails. Default is small, use large for larger thumbnails

showInline - (false)
If this option is true, the list item containing the link will be replaced with the YouTube video. See the gallery demo for an example of this.

autoPlay - (false)
true or false, whether or not to autoplay videos

showRelated - (true)
Set to false to stop related videos being shown at the end of the embedded video

Tags: video, jquery, youtube,