jQuery youtube playlist plugin - youtubeplaylist

Friday, August 14, 2009Dan Drayne

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.




    Video 1
    Video 2
    Video 3

$(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

Download

Download the source and demos

19 Aug - 12:27PM

Juergen Riemer

Thanks a lot for that plugin, it works like a charm, exactly what I was looking for!
Good work!

20 Aug - 10:41AM

Pawan

This is amazing !

21 Aug - 3:35AM

DDamir

Very nice.
Thanks.

28 Aug - 7:40AM

blfeigel

Hey, just wondering if there is a way to use a definition list to add descriptions? Or a way to pull descriptions from YouTube.

31 Aug - 6:27AM
Dan
Nicely done on changing the script to use definition lists. To pull descriptions from YouTube you'd need to go through a proxy script on your own server, otherwise you'd run up against cross-domain restrictions.

Or of course we could use the YouTube api, but that defeats the simplicity that makes this little plugin easy to use.

Dan
1. 3 Nov - 5:46AM
  K
  poda thendii ...ithu kollam nalla code aaaa

28 Aug - 9:22AM

Figured it out! I missed a 'ul' when editing the JavaScript file. All you have to do is change all 'li' elements to 'dt' and all 'ul' elements to 'dd'. But this does break the image variable, so in order to fix that add "dt" in the following portion of the javascript:

//do we want thumns with that?
if(options.addThumbs) {
selector.children("dt").each(function(i){
var replacedText = $(this).text();

Also remember to change the 'ul' to 'dt' in the call in the head of the html page:

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

29 Sep - 3:55AM

Serge

Hello,

is it possible to add an id in the url so that it would open directly let's say the 2nd or 3rd video on the list?

Regards,
Serge

6 Oct - 1:06AM
Dan
Hi Serge

Just picked up on this! It's not currently possible with this plugin, but being able to link directly to a video would be a great addition - I'll add it to my list for future revisions.

Cheers,
Dan

22 Oct - 10:20AM

Dex

Hello!

A fantastic script! Exactly what i was looking for! thank you!

I have a question about the dem2 with the thumbs. Is it possible to have more than 3 thubs? (for example, 10 videos with a slider for the thumbs or something like that?)

23 Oct - 2:41AM

Dan

Hi Dex

I don't see any reason why this wouldn't be possible. You could easily use it with our own SimplePager plugin (from this blog) or with a sliding panel plugin such as the great http://flowplayer.org/tools.

It's just an unordered list, so you should be able to do whatever you want to it. Feel free to post back if you have trouble integrating with another plugin.

Dan

24 Oct - 3:23AM

Yvonne

Hi !
First of all i have to say the script is awesome! Finally something i was looking for for some time.
I would like to to some changes about the script but since i'm not good in scripting i hope somebody can help me !
First i would like to have a colorful border around my videos like when you normally embed youtube videos. I tried some things in the js but it didn't work...
Second i would rather have the video list/thumbnails in a table with about 3 or 4 columns.

Are those things possible and can anybody help me realising them ???

Thanks in advance !

26 Oct - 11:16AM

Wilbur Like Smith

Anyway/chance to include videos from other sites in the same playlist?

26 Oct - 11:21AM
Dan
Hi Wilbur & Yvonne

I have a script in preparation that would allow for both of these things, so stay tuned.

@wilbur - I have vimeo on the radar - although thumbnails may be a problem. Do you have any other video sites in mind?

Dan
1. 2 Nov - 11:18AM
  Yvonne
  Hi Dan !
  Thanks a lot for your response. i can't await your new script. Hope you will release it soon !!
  Thanks
  Yvonne
2. 5 Nov - 3:17AM
  Adam G
  I think the script is great, and it may prove to be just what I was looking for. I'm trying to create a mixture of Youtube videos and Invodo videos. Invodo is working on a "static" player, so that you can just embed the Flash Object itself, but right now, you just have to insert a link (http://www.invodo.com/Marker-The-Baron-Ski-Binding/p/6V2IQBNX), and their JavaScript makes the switch to embed the player at runtime. So, we'll see what I can come up with. Thanks!

27 Oct - 1:59AM

Cliff

Hey Dan, this works really great, and is super easy to set up thank you. I just have one small problem: when I try to add span tags and style them within the ul li a tags, my CSS seems to get overwritten. I can tell this is done somehow by the js file because when i reload the page there is a quick flicker of how the page should actually look, which then takes out all css span styles.

Any ideas?
Thanks in advance.

28 Oct - 10:41AM
Dan
Hi Cliff

If you have span tags inside your links they will be overwritten when the plugin runs, as the content of the link is replaced with the thumbnail and then the video itself.

Do you have a test page up? And what end-result are you after? You may be able to do what you want a little differently.

Dan

29 Oct - 12:27PM

Ashraf

Hi Dan,
Thanks a lot man, this is a great yet extremely simple to use plug in. I just noticed that my youtube videos I pull using this plug in tend to lose the option of play in FULL SCREEN Mode. Is it possible to add an option to the plugin that keeps this behavior as the default but allows us to turn the full screen option choice on??

29 Oct - 4:37AM
Dan
Hi Ashraf

A great idea. I've updated the plugin to allow for fullscreen use, although it is turned off by default. To turn it on, simply add

$("ul.demo1").ytplaylist({allowFullScreen:true});

Hope this helps,
Dan

3 Nov - 9:42AM

Jagis

How do you auto play video on click. I do not want to auto play on load, just on click.

Thank you,

3 Nov - 9:49AM
Dan
Hi Jagis

The answer to this may involve changing the embed code after the navigation item is clicked for the first time. Could you describe your needs in more detail?

Dan
1. 4 Nov - 10:42AM
  Jagis
  I have autoPlay set to false. But when I click on a thumbnail, I would like the video to play automatically. Is there a way to do this? I am not a coder.
  
  Thank you.
2. 11 Nov - 11:00AM
  Jagis
  Please help with this comment:
  
  I have autoPlay set to false. But when I click on a thumbnail, I would like the video to play automatically. Is there a way to do this? I am not a coder.
  
  Thank you.
  1. 13 Nov - 9:40AM
    Dan
    Hi Jagis
    
    Do you have a test page online that I could see?
    
    Dan
  2. 7 Dec - 9:45AM
    Juergen Riemer
    Jagis, you have to sightly modify the code in youtubeplayslist.js , add a new option called e.g. playOnLoad
    
    comment out line 27
    //if(options.autoPlay) autoPlay = &autoplay=1";
    add those two lines in the play function (line 34)
    if(options.autoPlay && options.playOnLoad) autoPlay = "&autoplay=1";
    options.playOnLoad = true;
    finally add to the default options (line 19)
    playOnLoad : false,
    now a video would only start upon click and not load time, to overrule it simply add playOnLoad : true when initing the object.
    1. 23 Dec - 12:20PM
      dan
      Thanks Juergen, nice change. When I get time I should test and fold in to the main plugin (with attribution of course)!
      
      Dan
    2. 2 Jan - 9:15AM
      Jagis
      Thanks so much for the mod!!! Much appreciated!
      
      Thanks again.

3 Nov - 8:35AM

Ajax scripts

Hello,

This is very nice plugin indeed. I have added the piece of code to my ajax scripts directory, I hope you don't mind.

4 Nov - 7:43AM

Web D A

I am using it in all my silverstripe cms sites.

9 Nov - 5:49AM

Rocky

Greetings,

This is a great plugin. I need something similiar, but need to call my companies media server, not YouTubes.

If I wanted to load my own shell and movie, how would I do this? This is beyond my knowledge. Please help. Thank you.

30 Nov - 9:16AM
Dan
Hi Rocky,

For media files on your own server you might want to look at www.flowplayer.org or something similar.

Dan

28 Nov - 9:16AM

Dante

Dan,

This is amazing work! As a newbie to Umbraco and an intermediate Joomla and Javascript user with minimal software engineering experience I can tell you that snippets like this are enormous resources that helps to build a user base in an up-in-coming CMS like Umbraco.

I now have clients who must have ASPX development in C# and I am doing all I can to learn to manage these projects.

Umbraco seems very strong as an open source cms layer on top of the aspx framework. Your work really helps me to imagine how to extend Umbraco.

Thank you, thank you, thank you for your efforts.

30 Nov - 9:16AM
Dan
Thanks Dante!

28 Nov - 2:32AM

Marco

Hi dan very compliments for your script!
If possible insert an entire you tube channel?
So when you add a video channel, is also seen inside our page?

Thanks Marco from italy

30 Nov - 9:17AM
Dan
Hi Marco

I don't think I'd use this script to embed a whole youtube channel - you might want to look at the youtube api for that!

Dan
21 Dec - 7:02AM
Hristo Yankov
Hi,

You can check out my plugin: http://plugins.jquery.com/project/ChannelPlaylist
1. 23 Dec - 12:23PM
  dan
  Hi Hristo,
  
  Cool plugin, thanks for sharing here.
  
  Dan

6 Dec - 8:30AM

Luke McReynolds

I can't see it in the docs, but I'm wondering if it's still in there somewhere: is there a way to play automatically play the next video in a playlist after the first video is done playing?

I don't mean YouTube playlists, I mean the video in the next li tag.

Thanks a lot.

7 Dec - 9:37AM

Hi Luke

Unfortunately I don't know of a way to do this without using the youtube api or the youtube chromeless player swf, and the intention with thus plugin was to keep it as simple as possible.

Dan

8 Dec - 6:59AM
Luke McReynolds
Thanks for the reply, Dan. I'll see what I can hack up.

In the meantime, I've made a nifty little mashup/toy based around your plugin: check out http://dubstep.lukemcreynolds.
1. 8 Dec - 7:00AM
  Luke McReynolds
  Trying to put http://dubstep.lukemcreynolds.com - delete this comment if it doesn't work.
  1. 8 Dec - 9:35AM
    Dan
    Nice! Cool use of the plugin

13 Dec - 1:51AM

cusco

great tutorials
....

16 Dec - 11:22AM

Satish

Hi Dan,
This is a cool plug in.
I need to open the video in youtube site when i am click on the thumbnail image.
Could it possible .

16 Dec - 11:34AM
Dan
Hi Satish

You should be able to do this by deleting the contents of the function that begins

//load video on request selector.children("li").children("a").click(function() {

Just delete everything within this function (not the function itself) and this should then load youtube instead of using the embedded player.

Hope this helps
Dan
1. 16 Dec - 11:43AM
  Satish
  Hi Dann,
  
  Thanks for giving quick reply.
  
  When i click on thumbnail It's open in same window.
  
  Could help me to open video in a separate window.
  1. 16 Dec - 12:12PM
    Dan
    Hi Satish.
    
    No probs. For that, paste the following code inside the function you emptied.
    
    window.open(this.href);
    return false;
    
    And this will do it.
    
    Dan
    1. 16 Dec - 1:46AM
      Satish
      Hi Dan,
      It's Working fine.
      Thanks

16 Dec - 11:45AM

e11world

I love this plugin. Exactly what I was looking for except for one thing. I guess it might have to use the API key but basically, I'd like to get the videos from a specific user automatically. Kind of like subscribing to their videos but it just updates the list whenever a new video arrives.
Other features that would be nice is to have it so you can get the list from a user by either the most hits (popularity) or newest video as an option.

17 Dec - 9:34AM
Dan
HI e11world.

You could perhaps do this via the rss feed for a particular user?

Dan
1. 22 Dec - 11:54AM
  e11world
  Ya but I'm not sure how to really do that. I haven't looked at rss feeds that much but maybe when the time comes (for this type of project), I'll update this post with what I did.
  1. 23 Dec - 12:25PM
    dan
    You should check out Hristo's plugin at http://plugins.jquery.com/project/ChannelPlaylist for this. He just posted the other day and it seems to do what you need!

17 Dec - 11:41AM

Hi Dan,
Could please tell me
how do i use this plugin throw jcarousel

23 Dec - 12:13PM
dan
Hi Satish

The plugin may need some work to be compatible with jcarousel. What kind of transitions between videos would you like to see?

Dan

22 Dec - 2:54AM

chatcomze

Hi Dan,
We would like to say thank you for a great ecmascript program, it really made my day right your a great developer Dan keep up the good work. Hoping to see more programs from you, I'm your fan now.

http://chatcomze.host.sk/fan.html

23 Dec - 12:14PM
dan
Thanks for the kind words!

22 Dec - 7:48AM

I've got a weird thing here: I'm trying to combine two separate sets of list elements within the same ul like this:

ul class="demo2"
li class="top10"Top 10 #1 /li
li class="top10"Top 10 #2 /li
li class="top10" Top 10 #3 /li

li class="top10content"pTop ten tracks/p /li

li class="regular"Regular listing 1 /li
li class="regular"Regular listing 2 /li
li class="regular"Regular listing 3 /li

/ul

and having some way of differentiating between the two sets in a nice way.

The problem is that the first list elements (class="top10") have the video thumbnail displaying, but the second set of list elements (class="regular") do not.

If I take the separator element w/ the top10content class out, like so:

ul class="demo2"
li class="top10"Top 10 #1 /li
li class="top10"Top 10 #2 /li
li class="top10" Top 10 #3 /li
li class="regular"Regular listing 1 /li
li class="regular"Regular listing 2 /li
li class="regular"Regular listing 3 /li
/ul

then thumbnails for all videos work, as expected. If I replace the interstitial list element with a paragraph tag or anything else, again, the second set of li elements don't have thumbnails.

Any ideas? Thanks a lot.

23 Dec - 12:15PM
dan
Hi Luke

I think our comment system mangled your comment, sorry! What is the separator that you're using - do you have a test page?

Dan
1. 11 Jan - 4:34AM
  Luke McReynolds
  I ended up separating the "top 10" videos out on a separate page, so what I wanted to do is working... it's just on a separate page.
  
  The problem I was having is with different classes in the same unordered list.
  
  So, in the same ul:
  
  10 list elements with class "top10" (displaying links to YouTube videos)
  
  1 list element with class "top10content" (contains an hr, or paragraph tags with text, or anything, really)
  
  10+ list elements either without a defined class, or all with the same, different class
  
  What happens is that the video thumbnail shows up for the first videos, (top10 class) but not for any of the others.
  
  Like I said, I've worked around it, but it's still semi-unexpected behavior.
  
  Thanks a lot.

23 Dec - 8:05AM

Joe

Thank you for great plugin. But is it possible to make "DIV yt_holder" to be centered by horiz? Seems like it's always aligned to the left of the page. Thank you.

4 Jan - 9:44AM
Dan
Hi Joe

In the css for the demos I've put float: left on the yt_holder div. If you remove this and add "margin: 0 auto" it should align to the center.

Hope this helps,
Dan

29 Dec - 3:45AM

Martin L.

wow! very nice.
pls. how use this plugin for HTML click maps ?

4 Jan - 9:45AM
Dan
Hi Martin

What kind of things would you like to have clickmaps of? Images or vidoes?

Dan
1. 4 Jan - 6:15AM
  Martin L.
  hi Dan,
  thx you very much...
  images, IMG tag with atribut USEMAP.
2. 4 Jan - 6:20AM
  Martin L.
  my idea...use plugin
  like this videoarchive with Flash use....
  http://www.projekt-spad.cz/proj01.html
  1. 5 Jan - 9:35AM
    Dan
    This might require a different plugin unfortunately, quite heavy customisation of this plugin or using a big background image and absolutely positioned youtube player.
    1. 5 Jan - 12:43PM
      Martin L.
      Thx you Dan,
      I see ....
      I don't know how call plugin with youtube video adress from img with usemap .... through CSS.
      Or how call plugin without CSS. :) Sorry for my english.

1 Jan - 6:25AM

RichardGD

simply use any of the methods mentioned here http://dexterbaker.vox.com/library/post/the-problem-with-downloading-videos-from-youtube.html

15 Jan - 9:01AM

ady

Hi Dan. Great code! I love it. Thanks for your great ideas and work.

However, I have a questions... Is it me or i need to add something for it to be able to use this script to work on internet explorer 7 or 8?

I'm not able to see anything. I would appreciate if you could give me some tips.

Thanks,

Ady

18 Jan - 9:10AM
Dan
Hi Ady

No, it should "just work". Here's a screenshot of the demo in IE7 http://i.imgur.com/k1PWc.jpg, I also tested it in ie6 and 8.

Are the demos working for you? And are you getting any errors or anything that would help troublshoot?

Dan

18 Jan - 2:04AM

wespai

nice collect it to

ajax.wespai.com

18 Jan - 12:59PM

mike

Hi,

Love the script, have been playing around with it to not retrieve from youtube but from local files, what i was having problems with is that iwanted to stick in some plugin controls for the video such as play, rewind play from beginning which i can do, however im trying to add a sounds volume bar, fast forward, rewind and zoom in button but i dont know how to add this in. Do you have any ideas on what could be done?

18 Jan - 1:02AM
Dan
Hi Mike

I'd probably recommend using flowplayer (flowplayer.org) and a tabs plugin. You could perhaps try combining that with http://www.geckonewmedia.com/blog/2009/8/20/simplepager---jquery-paging-plugin--updated for a similar effect?

Dan

18 Jan - 3:36AM

Akiem

Dear Dan

Great plugin. Works perfect.
Thanks so much for making this.

It would be great if these two things would be possible?
- possility to show which track is playing
- automatically playing the next video after the playing video is finished.

18 Jan - 3:38AM
Dan
Hi Akiem

Thanks for the kind words!

Number one should be possible. The demo at http://geckohub.com/jquery/youtubeplaylist/ shows the current video being highlighted.

Number two is a great idea for an enhancement. I'll see If I can find some time soon for that.

Cheers,
Dan
1. 18 Jan - 4:17AM
  Akiem
  Dear Dan
  
  Thanks so much for the quick reply and for pointing me to the .currentvideo identifier. Very easy and simple. Great. I am very curious if you will also find a solution for the autoplay when a movie ends.
  
  Kind regards, Akiem

21 Jan - 3:59AM

Kevin John

gracia chato.. esto era lo q necesitaba.. y tiene buena pinta

5 Feb - 11:10AM

Sam Temple

Hi Dan,

I have been using your plugin for a while now and im in desperate need of playing the next video in the list, i was just wondering how that was coming along? And if you had any ideas on how to do it?

Cheers
Sam

8 Feb - 4:48AM

Bob

Fantastic plug-in, Dan -- so much easier than mucking w/YouTube API.

Question for thumbnails: I'd like to put multiple hrefs in a single list-item (say, 3 thumbnails per list item). If I make those changes, the script renders the thumbnail image for the first link as the thumbnail image for all the links in that list-item.

I think the answer lies in the var thumbUrl -- something to do with calling the proper DOM elements (or perhaps its in the 'selector.children().each(function(i){' string...can you provide some guidance? Thanks!

8 Feb - 4:58AM

Ignore my comment above about the thumbnails -- figured it out!

Thanks again for this -- save me a bunch of pain ;-)

Gecko New Media, Edinburgh