Thursday, July 12, 2012

jQuery youtube playlist plugin - youtubeplaylist

http://creativecan.com/wp-content/uploads/2012/03/Ruby-jQuery-Ken-Burns-Slider_thumb.jpg

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.
Demo showing the plugin set up to act like a gallery of YouTube videos.

Using the plugin

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

1.<div class="yt_holder">
2.<div id="ytvideo"></div>
3.<ul class="demo1">
4.<li><a href="http://www.youtube.com/watch?v=QBBWKvY-VDc">Video 1</a></li>
5.<li><a href="http://www.youtube.com/watch?v=ZXMQqLnRhRI">Video 2</a></li>
6.<li><a href="http://www.youtube.com/watch?v=Wvo-g_JvURI">Video 3</a></li>
7.</ul>
8.</div>

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

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

Download

Download the source and demos from github

0 comments: