Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Powermdbootstrap free asked 3 years ago


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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 12.0.0
  • Device: laptop, phone
  • Browser: chrome
  • OS: windows, android, ios
  • Provided sample code: No
  • Provided link: No