title: The previous and next button in fancybox are interfering with the play button of a vimeo video when it is set to display as gallery
body: <p>I have already tried tweaking the fancybox stylesheet but can't seem to move the hover area of the previous and next button so that it does not interfere with the play button of a vimeo video. I don't know if the problem can be solved by modifying the javascript file but I really don't have the knowledge to do so. Here is the css code of the fancybox stylesheet:</p>
  
  <pre><code>#fancybox-left, #fancybox-right {
  position: absolute;
  bottom: 0px;
  height: 100%;
  width: 35%;
  cursor: pointer;
  outline: none;
  background: transparent url('blank.gif');
  z-index: 1102;
  display: none;
  }
  
  #fancybox-left {
  left: 0px;
  }
  
  #fancybox-right {
  right: 0px;
  }
  
  #fancybox-left-ico, #fancybox-right-ico {
  position: absolute;
  top: 50%;
  left: -9999px;
  width: 30px;
  height: 30px;
  margin-top: 0px;
  cursor: pointer;
  z-index: 1102;
  display: block;
  }
  
  #fancybox-left-ico {
  background-image: url('fancybox.png');
  background-position: -40px -30px;
  }
  
  #fancybox-right-ico {
  background-image: url('fancybox.png');
  background-position: -40px -60px;
  }
  
  #fancybox-left:hover, #fancybox-right:hover {
  visibility: visible; /* IE6 */
  }
  
  #fancybox-left:hover span {
  left: 20px;
  
  }
  
  #fancybox-right:hover span {
  left: auto;
  right: 20px;
  }
  </code></pre>
  
  <p>I would appreciate if someone could help me figure out how to modify the hover areas for the previous and next buttons when using fancybox.</p>