iframe Youtube in Bootstrap Carousel - stop video sulla diapositiva

Question

Ho un gruppo di caroselli in una pagina, ognuno con un mix di video e immagini. Mi piacerebbe interrompere la riproduzione dei video di YouTube quando l'utente esce da un video facendo clic su uno dei controlli del carousel (a sinistra oa destra).

Mi piacerebbe essere in grado di rilevare quando l'utente fa clic sui controlli, creare un lettore in base al video corrente in riproduzione e disattivare tale video. Negli altri esempi che ho visto, i giocatori sono stati dichiarati nella funzione onYoutubeIframeAPIReady, ma ho pensato che sarebbe stato meglio non creare dinamicamente i giocatori per ogni video sulla pagina. In questo momento, viene visualizzato l'errore

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

quando faccio clic sui controlli del carosello. Tuttavia, se digito

player.stopVideo(); 

nella console javascript di Chrome, funziona correttamente. Che cosa sto facendo di sbagliato?

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

Esempio giostra:

<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

ho finito per usare la funzione callPlayer qui (che non ha richiesto utilizzando l'API di YouTube a tutti):

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