title: youtube video iframe in a bootstrap carousel - stop carousel from sliding when video is played
body: <p>I have a Bootstrap carousel playing videos from youtube. When a user plays a video I want the carousel to stop sliding. When the video is stopped, only then should the automatic sliding begin. </p>
  
  <p>Here is the code for my carousel:</p>
  
  <pre><code>&lt;div class="container"&gt;
            &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
                &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;/ol&gt;
  
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner"&gt;
                &lt;div class="item active"&gt;
                  &lt;iframe width="100%" height="500" src="https://www.youtube.com/embed/video1_ID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                &lt;/div&gt;
  
                &lt;div class="item"&gt;
                  &lt;iframe width="100%" height="500" src="https://www.youtube.com/embed/video2_ID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                &lt;/div&gt;
  
                &lt;div class="item"&gt;
                  &lt;iframe width="100%" height="500" src="https://www.youtube.com/embed/video3_ID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Left and right controls --&gt;
              &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
                &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
                &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Next&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is the code that I had tried to use, but its not working, besides I have 3 videos :</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://www.youtube.com/iframe_api"&gt;&lt;/script&gt;
          &lt;script&gt;
  
           //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');
           });
          &lt;/script&gt;
  </code></pre>
  
  <p>I had checked StackOverflow for solutions 
  <a href="https://stackoverflow.com/questions/18241569/bootstrap-carousel-pause-when-youtube-video-played">Bootstrap carousel - pause when YouTube video played</a> this link dealed with masks so I didn't understand how that would help me. </p>
  
  <p>Any kind of help would be appreciated. Thanks.</p>