Gecko New Media, Edinburgh

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

142 comment(s) for “jQuery youtube playlist plugin - youtubeplaylist”

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.
1. 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
blfeigel
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
1. 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?
1. 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.
1. 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
  1. 28 Jul - 4:32AM
    Dom
    Dan, thanks for a great plugin; I've been looking for something like this.
    
    I have the same question as Cliff: is there a way to add a span/p tag to just the text inside the ul li a? Whatever I add is overwritten. I would like to style the text within the link so it's vertically centered next to the video thumbnail (with, say, a top margin), but so far I haven't found a way to do this.
    1. 28 Jul - 4:44AM
      Dan
      Hi Dom
      
      Can you elaborate a bit on where you want the span to go? I added it to the link in a demo at http://geckohub.com/jquery/youtubeplaylist/fordom/ and the span stays in place.
      
      Cheers,
      Dan
      1. 28 Jul - 5:54AM
        Dom
        Dan, thanks for the quick response and demo!
        
        I would like the span to be applied to the text link next to the thumbnail image - but not applied to the image - like so:
        
        a href=link
        img src=video thumbnail.jpg
        span class=topmargin
        text link here
        /span
        /a
        
        - exactly the same as the demo you just created. It appears to be staying now when I view the source, but not when I inspect the element with Firebug…?
        
        I added a class to the span, but its properties are not being applied (e.g. display: block; margin-top: 30px;).
        
        Thanks again!
        29 Jul - 9:47AM
        Dan
        The problem is that when using thumbs:true I actually empty the html from within the list item before adding back the thumb. This should be easy enough to change, however if it's just centred text you need hows about using height and line-height? Check out the example at http://geckohub.com/jquery/youtubeplaylist/fordom/
        
        Dan
        29 Jul - 3:28AM
        Dom
        That did it…thanks!
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??
1. 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,
1. 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. 27 Jul - 5:19AM
        Aaron
        I'm trying to modify the script per these instructions and can't get it to work. Has anyone else had this issue?
        27 Jul - 5:23AM
        Dan
        Hi Aron
        
        Do you have a test page anywhere?
        
        Dan
        29 Jul - 10:21AM
        Aaron
        Yes: http://www2.ku.edu/~whyku/students/ As you'll see, I've added onto it quite a bit (it's working in tandem with a JSON generator to spit out the playlist from a content management system), but the functionality of the playlist should be pretty much intact.
        29 Jul - 10:22AM
        Aaron
        I forgot to mention: excellent plugin! Minus this one hiccup, it's done exactly what I've needed it to do.
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.
1. 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.
1. 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
1. 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
2. 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
Dan
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
1. 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 .
1. 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.
1. 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!
      1. 2 May - 2:00AM
        e11world
        This is actually pretty sweet. Thank you soo much for the link Dan.
17 Dec - 11:41AM
Satish
Hi Dan,
Could please tell me
how do i use this plugin throw jcarousel
1. 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
1. 23 Dec - 12:14PM
  dan
  Thanks for the kind words!
22 Dec - 7:48AM
Luke McReynolds
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.
1. 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.
1. 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 ?
1. 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
1. 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?
1. 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.
1. 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
Bob
Ignore my comment above about the thumbnails -- figured it out!

Thanks again for this -- save me a bunch of pain ;-)
13 Feb - 2:33AM
Tauren
Nice work. Any chance you could add some additonal options to it? I'd really like it to support HD, but also UI colors:

hd=1
color1=0x006699
color2=0x54abd6

The Embed tool on YouTube also includes the locale. Might be good to include it while you're at it:
hl=en_US

For now, I've hacked it up to add HD:

...
highDef: false
...
if(options.highDef) highDef = "&hd=1";
...
... +showRelated+fullScreen+highDef+ ...
... +showRelated+fullScreen+highDef+ ...

Thanks!
1. 15 Feb - 10:56AM
  Dan
  Hi Tauren
  
  That sounds like a good addition, I'll see if I can find some time to work it back in.
  
  Dan
17 Feb - 11:18AM
shaban
hi dan, I have been using your plugin
but i use my own videos (not youtube videos)
i.e client upload videos and application convert it to flv, so my question i need to add div to get all related videos (same youtube)
what i have to do to add another div under ytvideo and after load videos in ytvideo i will load videos in the new div depend on the selected video which user select?

thanks much
1. 17 Feb - 11:19AM
  Dan
  Hi Shaban
  
  This plugin is quite particular to youtube. In your case perhaps FlowPlayer and the playlist plugin would be a better choice?
  
  Dan
17 Feb - 1:55AM
shaban
Can you tell me how please?
already i changed the jquery.youtubeplaylist.js file and it work but the problem i don't know how to add this related videos
Thanks
1. 17 Feb - 1:57AM
  Dan
  Do you have a test page?
  
  Dan
17 Feb - 2:01AM
shaban
yes
1. 17 Feb - 2:02AM
  Dan
  Feel free to share it with me!
  
  Dan
17 Feb - 2:02AM
shaban
ok , but how?
1. 17 Feb - 2:04AM
  Dan
  You could upload it somewhere and post the web address here. After looking at your original post, I'm not 100% sure that this would be a quick and easy thing to do, as it is kinda outside the scope of the original little plugin.
17 Feb - 2:07AM
shaban
do u get my email?
1. 17 Feb - 2:10AM
  Dan
  No. it's Dan at geckonm.com
  1. 17 Feb - 2:11AM
    shaban
    Ok i will send you sample
    thanks
17 Feb - 4:03AM
mik
Hi,
thank you for ytgallery plugin it is really great, but I have a need to apply different style to part of the link by putting some inline elements inside an "a" element, e.g. strong, em or span.

do you have any solution for my problem?

Thanks

ps. i dont know how to write jQuery
1. 17 Feb - 4:05AM
  Dan
  Hi Mik
  
  The plugin should work as normal if you put the inline elements inside the A tags in the html, then apply the plugin to the list as normal. Are you having difficulty using it this way?
  
  Dan
  1. 17 Feb - 4:13AM
    mik
    Yes, it completely ignores any html element inside an "a".
    Maybe i am using some old version of the plugin. I'll try to redownload and reinstal..
    1. 17 Feb - 4:14AM
      Dan
      Do you have a link to an online test page I could look at?
      1. 17 Feb - 4:59AM
        mik
        If you want to take a look.
        This is simlified html and no other plugins except ytgallery.
        
        elementts inside an "a" still does not work.
        
        http://www.samoborskiglasnik.net/tmp/index.html
  2. 17 Feb - 4:28AM
    mik
    I'm sorry, my problem have nothing to do with your plugin. I have tested now with your demo and it accepts html elements inside an "a" normaly.
    
    Maybe plugins in my project confronts each other..
    
    Thank you
    1. 17 Feb - 4:29AM
      Dan
      No problem, glad you got it sorted.
      
      Dan
      1. 17 Feb - 5:27AM
        mik
        I found problem!
        
        if "addThumbs:true"
        then elements inside A does not work.
        
        17 Feb - 5:33AM
        Dan
        Ahh, of course! The problem is the empty() statement.
        
        Could you try the version at http://geckohub.com/jquery/youtubeplaylist/jquery.youtubeplaylist.mik.js and let me know if it works for you?
        
        Dan
        18 Feb - 8:36AM
        mik
        With this special version, child elements of an A works correctly, but thumb images of a video disappears..
        
        many thanks for your effort Dan!
        18 Feb - 9:18AM
        Dan
        I'll see if I can get some time to test something properly today.
19 Feb - 4:46AM
Stuart Brown
I have been using your plugin and im in need of playing the next video in the list, any ideas on how to do it?
Cheers
Stu
1. 22 Feb - 9:27AM
  Dan
  Hi Stuart.
  
  I plan to upgrade the plugin to make use of the youtube api to accomplish this. Stay tuned!
  
  Dan
  1. 23 Feb - 9:29AM
    Stuart Brown
    Thats excellent cheers
    1. 9 Mar - 10:02AM
      Stuart Brown
      Hey Dan,
      
      Any update on when this is getting implemented?
      
      Cheers
      Stu
      1. 10 Mar - 10:18AM
        Dan
        eurgh sorry man we've been busy as hell recently. It's definitely on my list of things to do as soon as I get time - sorry again
19 Feb - 11:00AM
Soren Iversholt
Hello Dan,
Thank you for a grate plug in.

I would like to have a describing text under the movie. But when I click and start the movie, the text disappears. I have a test site here: http://65714m82web.sub.ots.dk/test/

Do you have a solution on the problem?

Best regards
Soren
1. 22 Feb - 9:30AM
  Dan
  Hi Soren
  
  By using...
  
  showInline: true
  
  ...you are replacing the contents of your list item with the video. Perhaps the first example would be more suitable if you'd like to keep the text visible?
  
  Dan
21 Feb - 6:48AM
Al
You rock!!!

I hope there's some easy solution to set initial ytholder div to contain some image, before first video being selected...

Thank You anyway!
1. 21 Feb - 7:43AM
  Al
  :P
  Sorry for bothering...
  I have altered var firstVid and that's all!
  1. 22 Feb - 9:30AM
    Dan
    Glad you got sorted!
15 Mar - 8:18AM
Bryan
Great plugin, and so simple. If you have the time, I have 2 questions:

1 - with widescreen formatted youtube videos, the thumbs appear with black bars at top and bottom. any way of getting rid of that? adjusting the size of the thumbs in the CSS doesn't do it?

2 - can the thumbnail images be replaced with my own jpgs or pngs? If so, how? (for that matter, can the landing image for the main video be replaced with a jpg or png as well?)

thanks for your time, and kudos again on a really simple-to-use but powerful plugin!

- B
1. 16 Mar - 10:10AM
  Dan
  Hi Bryan
  
  Glad you like the plugin! It's due an overhaul soon, so stay tuned.
  
  1. The thumbs are just coming straight from youtube - I haven't yet investigated whether there are different thumb options for widescreen videos. Do you have an example video I could check with?
  
  2. Currently, no. It's not a bad idea, but I'm not sure how it would be managed and worry it might complicate the plugin too much? I'll definitely consider it for a future release though.
  
  Hope this helps,
  Dan
7 Apr - 6:28AM
Raghib suleman
Thanks a lot man...
Thanks
8 Apr - 1:42AM
mohamed bouhlel
hi
nice work Dan thanks for sharing , just wondering if this can basis for setting up playlists in my website ?
kind regards
1. 8 Apr - 12:00PM
  Dan
  Hi Mohamed
  
  You can use this as a basis for youtube playlist only at the minute, but the source is quite simple so you should be able to bend it to your needs!
  
  Dan
10 Apr - 12:08PM
Terry
Thanks for providing this Dan! This is coming in really handy right now. I made a slight variation that doesn't need the embed element. Feel free to take a look:

http://www.ackernaut.com/code/tune-in-to-youtube-with-jquery/
16 Apr - 12:04PM
mik
hi Dan, thanks for nice plug in.

...but, I have some issue...
I have to make a list of video thumbs with headings and corresponding dates, but unfortunately i don't have option to style dates differently.
(span or any other element inside A does not exist, or content is duplicated when i put it inside the link parent.)

it does not matter to me if dates are links or not, i just need them differently styled inside the list element with thumb and heading.

is there a way make it?

I would be very, very grateful if someone have solution.

thanks
14 May - 6:55AM
adoch
Hi thanks for your contribution its excelent, is the any way to autoplay all the videos in the list.
Eg. After the of autoplay first video , the second one can keep going without having to do click each video to play
19 May - 8:28AM
ceasar
Thanks for this script.
I made some modifications on the js and made a little php script to fill the list

Preview
http://www.cfcms.nl/youtube/index.php
31 May - 1:48AM
ANDREAS
Hello, is there a way to highlight the link on menu when clicked? It can serve as a guide of what is currently is playing.
2 Jun - 3:45AM
Roshanak
very nice plugin. I would love to know how i can add description of each movie under it nicely. Please teach me how to do it.
10 Jun - 4:06AM
Barry
Very useful plugin. Much better than embedding playlist from YouTube as it works with HTML5 so works great on iPad.
27 Jun - 7:03AM
jose luis macedo
Hi Dan, What don't update your plugin with fuctions news ?
7 Jul - 1:33AM
dinle
i like this. thank u for jQ. YT. playlist.
10 Jul - 9:42AM
dingle
Hi Dan, I can't seem to get it centered. I tried removing float: left; and adding margin: 0 auto; but it didn't work for me. I do have another style sheet implemented but I don't think they are interfering as I already changed all the id's..

Thanks for such a great plugin. I appreciate any help.
1. 12 Jul - 9:00AM
  Dan
  Hi Dingle
  
  You should probably wrap the playlist in another DIV that's centred, then you can float the playlist if needs be within the centred div. Do you have a test page I can see?
  
  Dan
30 Jul - 9:20AM
coffeeatea
Are you looking for coffee gifts? We can tell you more about the coffee gifts including coffee machines and coffee pods.