title: Pause Bootstrap carousel when playing Youtube video
body: <p>I have made a carousel which has images and a Youtube video. 
  Even when the video is playing the carousel slides and when returned to the video, the video is still playing. </p>
  
  <ol>
  <li><p>I want the carousel to pause when the video is playing and carry on if arrows clicked or if the video ends. </p></li>
  <li><p>Stop video, if it was playing and the user clicked on carousel arrows.</p></li>
  </ol>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover"&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;div id="cal01"&gt;&lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="item"&gt;
                                  &lt;div id="cal02"&gt;&lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="item"&gt;
                                  &lt;iframe src="https://www.youtube.com/embed/pFaJqKqQa2E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen id="cal3"&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>How can I achieve this? I wasn't able to find anything similar to this.</p>