video carousel

hi I want to know how to play the video automatically and when the slide is changed it will automatically pause

I have tried it in many ways but I still can't get it to play automatically one at a time since they all play and none pause thanks for your help

    <mdb-carousel id='Carousel' [animation]="'slide'" (activeSlideChange)="onSlideChange($event)" class="carousel slide carousel-fade" [interval]="10000" [animation]="'fade'">
      <mdb-carousel-item>
        <div class="carousel-item active" id='home'>
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"
            alt="First slide"></div>
      </mdb-carousel-item>
      <mdb-carousel-item> 
        <div class="embed-responsive embed-responsive-16by9" id='video'autoplay>
          <iframe src="https://streamable.com/e/zv5yq7" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
      </mdb-carousel-item>
      <mdb-carousel-item>
        <div class="embed-responsive embed-responsive-16by9" id='video2'autoplay loop >
          <iframe src="https://streamable.com/e/ymt2gj" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
      </mdb-carousel-item>
      <mdb-carousel-item>
        <div class="embed-responsive embed-responsive-16by9" id='video3'autoplay>
          <iframe src="https://streamable.com/e/cxncf9" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
      </mdb-carousel-item>
    </mdb-carousel>