Get this jQuery Youtube Playlist working?

Question

Drupal 7. I'm trying to get this to work - seems simple enough. I added the .js file through my theme's .info file, and it's picking that up. I selected "Full HTML" as the format for my block, and pasted the code in (both the js and the ul). Just doesn't work.

http://www.geckonewmedia.com/blog/2009/8/14/jquery-youtube-playlist-plugin---youtubeplaylist

Any ideas? I suspect the js needs to be loaded somewhere else, that maybe it's being stripped out from the block code?

---

Per SoftArtisans (thanks) this is now what I have in the Body of my custom block (set to full HTML):

    <script type="text/ecmascript">

(function ($) {
  $("ul.aintv").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo'});
}(jQuery));
       
</script>


<div class="yt_holder">

<div id="ytvideo"></div>

  <ul class="aintv">
    <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>

It's still not working. I verified the other .js file is being picked up in the source.

Answer 1

Remove your JS path from the .info file and try something like this (replace /path/to/yourscript.js with the path to your script):

jQuery.noConflict();

jQuery(document).ready(function($){
   $.getScript('/path/to/yourscript.js', function() {
        $("ul.demo1").ytplaylist();
   });
});

This dynamically loads your JS when the DOM is fully loaded and it makes sure that $ can be used without conflicting with other libraries.

Answer 2

In Drupal, you can't just call jQuery quite like that. The reason is mostly because there my be other JavaScript libraries in use so jQuery is not aliased as $() in Drupal. For more details on that you can view the Drupal Docs about JavaScript compatibility, or the specific issue in the queue.

The solution is to wrap your jQuery code as described in the Drupal docs page linked to above. In your case it would look something like this...

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

Answer 3

jquery.youtubeplaylist.js uses directly $ instead of jQuery. Contrary to what is said above, you have to modify that plugin and replace all $ by jQuery.

Answer 4

It seems like you are trying to make a Drupal Module when there is already something that does this out there. Check out http://drupal.org/project/mediafront which is a video/img/music skin that works with the Media Module, Media:YouTube & Media:Vimeo Modules for url pasting (which you are looking for).

Bonus is there is a video http://www.mediafront.org/dallas-drupal-days-2011-presenting-media where the person who made the module is presenting. He demos pasting in urls at 44 minutes.

This module is written in jQuery (like the one you are trying to use) and is set up for Drupal so you don't have to figure out the configurations and is so amazing your mind will be blown.