Youtube iframes Bootstrap Carrousel - arrêt de la vidéo sur la diapositive

J'ai un tas de Manèges sur une page, chacune avec un mélange de vidéos et d'images. J'aimerais arrêter de Youtube des vidéos à partir de la lecture lorsque l'utilisateur quitte une vidéo en cliquant sur le carrousel de contrôle (gauche ou droite).

Je voudrais être en mesure de détecter lorsque l'utilisateur clique sur le contrôle, créer un joueur sur la vidéo en cours de lecture, et tourner cette vidéo off. Dans les autres exemples que j'ai vu, les joueurs ont été déclaré dans le onYoutubeIframeAPIReady fonction, mais j'ai pensé qu'il serait préférable de ne pas créer dynamiquement des joueurs pour chaque vidéo sur la page. En ce moment, j'obtiens le message d'erreur

Uncaught TypeError: Object #<T> has no method 'stopVideo' 

quand je clique sur le carrousel des contrôles. Cependant, si j'type

player.stopVideo();

dans le Chrome console javascript, il fonctionne très bien. Ce que je fais mal?

  <script>
  var youtubeReady = false;

  function onYouTubeIframeAPIReady(){
    youtubeReady = true;
  }

  $('.carousel').on('slide', function(){
    if(youtubeReady){
      console.log("setting player");
      var iframeID = $(this).find('.active').find('iframe').attr("id");
      player = new YT.Player(iframeID); 
      player.stopVideo(); 
    }
  });
  </script>

Exemple carrousel:

<div class="mainPhoto carousel slide 523" id="carousel-523">
          <div class="carousel-inner 523">
          <div class="item active">
             <div class="flex-video">
                 <a class="fancybox" href="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;enablejsapi=1" rel="gallery 523" data-fancybox-type="iframe">
                     <iframe src="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;enablejsapi=1" id="1188">
                     </iframe>
                 </a>
             </div>
         </div>
        <div class="item">
             <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/2013-07-05_19.47.55.jpg" rel="gallery 523" data-fancybox-type="image">
                 <img alt="Preview_2013-07-05_19.47.55" id="1189" src="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/preview_2013-07-05_19.47.55.jpg" width="100%">
            </a>
        </div>
    </div>
            <a class="carousel-control left" href="#carousel-523" data-slide="prev" style="display: none;">‹</a>
            <a class="carousel-control right" href="#carousel-523" data-slide="next" style="display: none;">›</a>
        </div>

OriginalL'auteur scientiffic | 2013-07-07