Twitter bootstrap Youtube iframes在引导转盘中-幻灯片上的停止视频

我在一个页面上有一堆旋转木马，每一个都混合了视频和图像。我想在用户单击其中一个旋转木马控件（左或右）退出视频时停止播放Youtube视频

我希望能够检测用户何时单击控件，根据当前正在播放的视频创建播放器，然后关闭该视频。在我看到的其他示例中，播放器是在onYoutubeIframeAPIReady函数中声明的，但我认为最好不要为页面上的每个视频动态创建播放器。现在，我发现了错误

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

在Chrome javascript控制台中，它可以正常工作。我做错了什么

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

var youtubeReady=false；
函数onyoutubeiframeapiredy（）{
youtubeReady=true；
}
$（'.carousel'）。在（'slide'，function（）上{
如果（youtubeReady）{
控制台日志（“设置播放器”）；
var iframeID=$（this）.find（'.active'）.find（'iframe'）.attr（“id”）；
player=新的YT.player（iframeID）；
player.stopVideo（）；
}
});

旋转木马示例：

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

---

我在这里使用了callPlayer函数（根本不需要使用youtube API）：

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