title: Flexslider youtube clickable area
body: <p>I am using Flexslider 2 to create a simple playlist of youtube iFrames. I've gotten the code to pause youtube when changing slides and whatnot, but the big issue is the youtube control area. I think it stems from the FitVids.js making the iframe clickable area be jacked up. The odd thing is if I take FitVids.js out of the code, Flexslider 2 no longer works for iframes.</p>
  
  <p>The clickable area is in the top left around 200px high and 400px across. The width of the video is 960px and whatever fitvids dems the height needed.</p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>$(window).load(function() {
      function ready(player_id) {             
          var froogaloop = $f(player_id);             
          froogaloop.addEvent('play', function(data) {                
              jQuery('.flexslider').flexslider("pause");          
          });             
  
          froogaloop.addEvent('pause', function(data) {               
              jQuery('.flexslider').flexslider("play");           
          });         
      } 
  
      // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
          $(".flexslider").fitVids().flexslider({
              animation: "slide",
              animationLoop: false,
              smoothHeight: true,
              slideshow: true,
              pauseOnHover:true,
              useCSS: false,
              video: true,
              before: function(slider){
                  if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
                          $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
                  // ------------------  YOUTUBE FOR AUTOSLIDER ------------------
                  playVideoAndPauseOthers($('.flexvid iframe')[0]);
              }
          });
  
      function playVideoAndPauseOthers(frame) {
          $('iframe').each(function(i) {
              var func = this === frame ? 'playVideo' : 'stopVideo';
                  this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
          });
      };
  
      // ------------------ PREV &amp; NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------
          $('.flex-next, .flex-prev').click(function() {
              playVideoAndPauseOthers($('.flexvid iframe')[0]);
      });
  
  
  });
  </code></pre>
  
  <p><em>EDIT</em>
  I just found out everything works fine in Chrome but not Firefox.</p>