在引导旋转木马中使用youtube视频iframe - 在播放视频时停止旋转木马滑动

Question

我有一个Bootstrap轮播播放来自youtube的视频。当用户播放视频时，我希望旋转木马停止滑动。当视频停止时，只有这样才能开始自动滑动。

这是我的轮播的代码：

<div class="container">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <iframe width="100%" height="500" src="https://www.youtube.com/embed/video1_ID" frameborder="0" allowfullscreen></iframe>
              </div>

              <div class="item">
                <iframe width="100%" height="500" src="https://www.youtube.com/embed/video2_ID" frameborder="0" allowfullscreen></iframe>
              </div>

              <div class="item">
                <iframe width="100%" height="500" src="https://www.youtube.com/embed/video3_ID" frameborder="0" allowfullscreen></iframe>
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>

这是我尝试使用的代码，但它没有用，除了我有3个视频：

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
        <script>

         //YOUTUBE API EMBED
         var player;
         function onYouTubeIframeAPIReady() {
         player = new YT.Player('player', { playerVars: {
         autoplay: 1,
         loop: 1,
         controls: 1,
         showinfo: 0,
         autohide: 1,
         modestbranding: 1,
         html5:1,
         rel: 0},
         videoId: 'lO87r34w6PA',
         events: {
         'onStateChange': onPlayerStateChange
         }
         });
         }

         //FIND OUT STATE OF YOUTUBE VIDEO, HAS IT FINISHED?
         //IF IT'S FINISHED, START CAROUSEL CYCLE
         var myPlayerState;
         function onPlayerStateChange(event) {
         if (event.data == YT.PlayerState.ENDED) {
         $('#myCarousel').carousel('cycle');
         }
         myPlayerState = event.data;
         }

         //IF DIRECTIONAL ARROWS ARE CLICKED, PAUSED VIDEO
         $( ".carousel-control",".carousel-indicators" ).click(function() {
         player.stopVideo();
         $('#myCarousel').carousel('cycle');
         });
        </script>

我已经检查了StackOverflow的解决方案 Bootstrap carousel - pause when YouTube video played这个链接用面具处理，所以我不明白这对我有什么帮助。

任何形式的帮助将不胜感激。感谢。