title: How can I get jCarousel to pause when a YouTube video is playing?
body: <p>I have a jCarousel (jquery) running for several youtube videos. The carousel works great, and even pauses when you hover on a slide- but it will resume if you move your cursor off the slide, even if the video is playing.</p>
  
  <p>Videos are embedded using the YouTube Player API.</p>
  
  <p>Plugin: <a href="http://sorgalla.com/jcarousel/" rel="nofollow">http://sorgalla.com/jcarousel/</a></p>
  
  <p>This is the Carousel code I'm using:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function mycarousel_initCallback(carousel, item, idx, state){
      // Disable autoscrolling if the user clicks the prev or next button.
      carousel.buttonNext.bind('click', function() {
          carousel.startAuto(0);
      });
  
      carousel.buttonPrev.bind('click', function() {
          carousel.startAuto(0);
      });
  
      // Pause autoscrolling if the user moves with the cursor over the clip.
      $('#mycarousel').hover(function() {
          carousel.stopAuto();
      }, function() {
          carousel.startAuto();
      });
  
  };
  
  $(function() {
      $('#mycarousel').jcarousel({
          auto: 2,
          wrap: 'both',
          initCallback: mycarousel_initCallback
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The YouTube script:</p>
  
  <pre><code>&lt;script&gt;
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var done = false;
      var player;
  
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '505', // 535
        width: '900',
        videoId: 'DxZve0UV6UM',
        playerVars: {
          'autoplay': 0,
          'controls': 0,
          'modestbranding': 1,
          'wmode': 'opaque'
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  function onPlayerReady(evt) {
      player.setPlaybackQuality('hd720');
  }
  function onPlayerStateChange(evt) {
  
      if (evt.data == YT.PlayerState.PLAYING &amp;&amp; !done) {
  
          done = true;
      }
  }
  function stopVideo() {
      player.stopVideo();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And the HTML...</p>
  
  <pre><code>                &lt;ul id="mycarousel" class="jcarousel-skin-tango"&gt;
                      &lt;li&gt;
                          &lt;div id="player"&gt;&lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div id="player"&gt;&lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  </code></pre>
  
  <p>Any suggestions?</p>