Custom styles for multiple instances of Fancybox
===

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.

Here are my js calls

    <script type="text/javascript">
		$(document).ready(function() {
	 	$(".vimeo").fancybox({
  		width: 781,
 	 	height: 440,
  		type: 'iframe',
  		fitToView : false,
  		wrapCSS    : 'fancybox-nav-video'
 		});
		});
	</script>
	<script>
    $(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();      
    </script>

 
And here is how I have images and video displayed within my HTML:

    <a class="fancybox" rel="gallery1" href="image1.jpg">
    <a class="fancybox" rel="gallery1" href="image2.jpg">
    <a class="vimeo" rel="gallery2" href="videoplayerlink1">
    <a class="vimeo" rel="gallery2" href="videoplayerlink2">



Do I need to add something or change anything within the .js file? What am I missing?