Bootstrap carousel video

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.

I saw something in the bootstrap documentation about

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

but I don't know how to do it.. I have tried a lot of things but they did not worked.

HTML

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <h1 class="slide1 display-1"><div class="circle">2019 FASHION TRENDS</div></h1>
          </div>
          <div class="carousel-item">
                <iframe src="https://www.youtube.com/embed/0qQHSFPilwE?start=12?rel=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2017/09/23/08/36/coffee-2778108__480.jpg" alt="Third slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

JS

$('.carousel').carousel({interval: 3000, pause: "hover"});