title: Custom styles for multiple instances of Fancybox
body: <p>I am using Fancybox 2.0.6 to display both images and video. When rolling over the image/video (when there are multiple images in a gallery), Fancybox displays the previous and next icons and links. The clickable area takes up 40% of the left and right side of the image/video, as it should according to jquery.fancybox.css. This is great for images, however for video, it blocks the play button so that the user goes to the next/prev video rather than being able to play or pause the video. I would like to change the width of the clickable area, but only for videos - I would like it to stay the same for images. I have researched Fancybox to find that I can use wrapCSS to create custom styles for multiple instances of Fancybox, but I cannot get it to work.</p>
  
  <p>Here are my js calls</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      $(".vimeo").fancybox({
      width: 781,
      height: 440,
      type: 'iframe',
      fitToView : false,
      wrapCSS    : 'fancybox-nav-video'
      });
      });
  &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() 
  {
  $('.fancybox').fancybox(
      {
          padding : 0,
          openEffect  : 'elastic'
      }
      );
      $(".fancybox").fancybox(
      {
          wrapCSS    : 'fancybox-nav',
          closeClick : true,
          helpers : {
              overlay : {
                  css : {
                      'background-color' : '#000'
                  }
              },
              thumbs  : {
                  width   : 50,
                  height  : 50
              }
          }
      }
      );
  }
  );
  $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is how I have images and video displayed within my HTML:</p>
  
  <pre><code>&lt;a class="fancybox" rel="gallery1" href="image1.jpg"&gt;
  &lt;a class="fancybox" rel="gallery1" href="image2.jpg"&gt;
  &lt;a class="vimeo" rel="gallery2" href="videoplayerlink1"&gt;
  &lt;a class="vimeo" rel="gallery2" href="videoplayerlink2"&gt;
  </code></pre>
  
  <p>Do I need to add something or change anything within the .js file? What am I missing?</p>