title: Bootstrap carousel video
body: <p>I want to have a video that autoplays in carousel when the slide with the video is on. I only managed to autoplay it when entering the site, even though it's not on the video slide.</p>
  
  <p>I saw something in the bootstrap documentation about </p>
  
  <pre><code>$('#myCarousel').on('slide.bs.carousel', function () {
    // do something…
  })
  </code></pre>
  
  <p>but I don't know how to do it.. I have tried a lot of things but they did not worked.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"&gt;
          &lt;div class="carousel-inner"&gt;
            &lt;div class="carousel-item active"&gt;
              &lt;h1 class="slide1 display-1"&gt;&lt;div class="circle"&gt;2019 FASHION TRENDS&lt;/div&gt;&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
                  &lt;iframe src="https://www.youtube.com/embed/0qQHSFPilwE?start=12?rel=0&amp;amp;autoplay=1&amp;amp;controls=0&amp;amp;showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;img class="d-block w-100" src="https://cdn.pixabay.com/photo/2017/09/23/08/36/coffee-2778108__480.jpg" alt="Third slide"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
            &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
            &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.carousel').carousel({interval: 3000, pause: "hover"});
  </code></pre>