Youtube iframes w Bootstrap Carousel - zatrzymaj wideo na slajdzie

Question

Mam na stronie kilka paczek karuzelowych, każdy z mieszanką filmów i zdjęć. Chciałbym zatrzymać odtwarzanie filmów z YouTube, gdy użytkownik opuszcza wideo, klikając jedną z kontrolek karuzeli (w lewo lub w prawo).

Chciałbym móc wykryć, kiedy użytkownik klika kontrolki, utworzyć gracza na podstawie bieżącego odtwarzanego wideo i wyłączyć to wideo. W innych przykładach, które widziałem, gracze zostali zadeklarowani w funkcji onYoutubeIframeAPIReady, ale pomyślałem, że lepiej nie dynamicznie tworzyć graczy dla każdego wideo na stronie. Właśnie dostaję błąd po kliknięciu elementów sterujących karuzeli. Jeśli jednak wpiszę w konsoli javascript Chrome

player.stopVideo(); 

, to działa poprawnie. Co ja robię źle?

<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> 

Przykład karuzeli:

<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> 

Answer 1

skończyło się za pomocą funkcji callPlayer tutaj (który nie wymaga stosowania API youtube w ogóle)

YouTube iframe API: how do I control a iframe player that's already in the HTML?