title: fancybox no navigation buttons for video gallery
body: <p>I'm using fancybox for some youtube videos and I would like to have navigation buttons (next and previous buttons beside the overlay) exactly like in <a href="http://jsfiddle.net/fhpZ5/" rel="nofollow noreferrer">THIS</a> fiddle.</p>
  
  <p>Here is my fancybox:</p>
  
  <pre><code>$('.fancybox-media')
      .attr('rel', 'playlist')
      .fancybox({
          openEffect: 'none',
          closeEffect: 'none',
          prevEffect: 'none',
          nextEffect: 'none',
          arrows: false,
  
          helpers: {
              media: {}
          },
          overlay : {
              css: { 'overflow-y': 'hidden' }
          },
          youtube : {
              autoplay: 1,
              hd: 1,
              wmode: 'opaque',    // shows X to close
              vq: 'hd720'         // default 720p hd quality
          },
          beforeShow : function(){
              $("body").css("overflow", "hidden"); // hide body scrollbar
          },
          afterClose: function(){
              $("body").css("overflow", "scroll"); // show body scrollbar
          }
      });
  </code></pre>
  
  <p>Regarding to <a href="https://stackoverflow.com/questions/9172832/next-and-previous-button-not-visible-in-fancybox-jquery">this</a> post from JFK, I've put these styles in my css file:</p>
  
  <pre><code>.fancybox-lock {
      margin: 0 !important;
  }
  
  .fancybox-nav {
      width: 60px;       
  }
  
  .fancybox-nav span {
      visibility: visible;
  }
  
  .fancybox-next {
      right: -60px;
  }
  
  .fancybox-prev {
      left: -60px;
  }
  </code></pre>
  
  <p>and my html:</p>
  
  <pre><code>&lt;li class="closed"&gt;Headline
      &lt;ul&gt;
          &lt;li class="fl"&gt;&lt;a class="fancybox-media" href="http://www.youtube.com/watch?v=Dtb5Srdx7iY" rel="playlist"&gt;&lt;img class="thumbnail" src="x.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="fl"&gt;&lt;a class="fancybox-media" href="http://www.youtube.com/watch?v=Dtb5Srdx7iY" rel="playlist"&gt;&lt;img class="thumbnail" src="x.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and the implemented stylesheets:</p>
  
  <pre><code> &lt;!-- FancyBox --&gt;
  &lt;script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.4"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.4" media="screen" /&gt;
  </code></pre>
  
  <p>I just can't get this to work and I don't know why. I feel like I am missing some files or so.</p>