title: Embed YouTube html5 Video Player with side thumbnails - Filter videos by Playlist?
body: <p>I am using the following code to display an html5 youtube player with the thumbnails for the other videos displaying to the right of the main video:</p>
  
  <p><a href="http://jsfiddle.net/NmvA9/490/" rel="nofollow">http://jsfiddle.net/NmvA9/490/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'&gt;&lt;/script&gt;
  &lt;script language="JavaScript"&gt;
      &lt;!--      
  /*
  Copyright 2011 : Simone Gianni &lt;simoneg@apache.org&gt;
  
  Released under The Apache License 2.0 
  http://www.apache.org/licenses/LICENSE-2.0
  
  */
  (function() {
      function createPlayer(jqe, video, options) {
          var ifr = $('iframe', jqe);
          if (ifr.length === 0) {
              ifr = $('&lt;iframe scrolling="no"&gt;');
              ifr.addClass('player');
          }
           var src = 'http://www.youtube.com/embed/' + video.id;
  
          if (options.playopts) {
              src += '?';
              for (var k in options.playopts) {
                  src+= k + '=' + options.playopts[k] + '&amp;';
              }  
              src += '_a=b';
          }
          ifr.attr('src', src);
          jqe.append(ifr);  
      }
  
      function createCarousel(jqe, videos, options) {
          var car = $('div.carousel', jqe);
          if (car.length === 0) {
              car = $('&lt;div&gt;');
              car.addClass('carousel');
              jqe.append(car);
  
          }
          $.each(videos, function(i,video) {
              options.thumbnail(car, video, options); 
          });
      }
  
      function createThumbnail(jqe, video, options) {
          var imgurl = video.thumbnails[0].url;
          var img = $('img[src="' + imgurl + '"]');
          if (img.length !== 0) return;
          img = $('&lt;img&gt;');    
          img.addClass('thumbnail');
          jqe.append(img);
          img.attr('src', imgurl);
          img.attr('title', video.title);
          img.click(function() {
              options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}}));
          });
      }
  
      var defoptions = {
          autoplay: false,
          user: null,
          carousel: createCarousel,
          player: createPlayer,
          thumbnail: createThumbnail,
          loaded: function() {},
          playopts: {
              autoplay: 0,
              egm: 1,
              autohide: 1,
              fs: 1,
              showinfo: 0
          }
      };
  
  
      $.fn.extend({
          youTubeChannel: function(options) {
              var md = $(this);
              md.addClass('youtube');
              md.addClass('youtube-channel');
              var allopts = $.extend(true, {}, defoptions, options);
              allopts.maindiv = md;
              $.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&amp;format=5&amp;callback=?', null, function(data) { 
  
                  var feed = data.feed;
                  var videos = [];
                  $.each(feed.entry, function(i, entry) {
                      var video = {
                          title: entry.title.$t,
                          id: entry.id.$t.match('[^/]*$'),
                          thumbnails: entry.media$group.media$thumbnail
                      };
                      videos.push(video);
                  });
                  allopts.allvideos = videos;
                  allopts.carousel(md, videos, allopts);
                  allopts.player(md, videos[0], allopts);
                  allopts.loaded(videos, allopts);
              });
          } 
      });
  
  })();
  
  $(function() {
      $('#player').youTubeChannel({user:'nellrobinsonmusic'});
  });   
   // --&gt;
  &lt;/script&gt;  
  
  &lt;style type="text/css"&gt;
  &lt;!--
  #player {
      width: 853px;
      height: 480px;
      overflow: hidden;
      background: none;
      position: absolute;
      border: none;
  }
  
  .youtube .carousel {
      width: 20%;
      height: 100%;
      overflow: auto;
      position: absolute;
      right: 0px;
      z-index: 3;
  }
  
  .youtube .thumbnail {
      margin: 2px;
      width: 80%;
      border: 1px solid black;  
  }
  
  .youtube iframe.player {
      width: 80%;
      height: 480px;  
      overflow: auto;
      border: 0;
  }
  --&gt;
  &lt;/style&gt; 
  
      &lt;/head&gt;
      &lt;body&gt;
           &lt;div id="player"&gt;
          &lt;/div&gt;      
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All of that is working exactly as it should, however, it lists ALL the videos in my youtube channel. Does anyone know how to limit that to just the videos in a particular youtube playlist?</p>
  
  <p>Any help is greatly appreciated. Thank you!</p>