Bootstrap carousel video

Question

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"});

score 1 · Accepted Answer · answered Nov 16 '19 at 17:49

Which version of Bootstrap are you working with?

Bootstrap 4 Carousel events allow you to listen to the "end of a slide transition": slid.bs.carousel.

Then, you could try to retrieve which of your items is currently displayed.

Depending on how your video HTML element is produced (for example, if you use a lib like mediaelement.js), it will depend how to "run" the video after it has been displayed in carousel active slide.

If you use mediaelement.js, you could use the play() function to manually run the video after the slide transition event is throw.

Another way to test: goal is to rely on the autoplay attribute from the VIDEO html tag.

You could make the DOM to contain an element which describes the video, but not a real <VIDEO> tag, then, after it is shown in active slide, a JS would create the real <VIDEO> tag with an autoplay attribute from this descriptor element, delegating to the browser the role of running the video as soon as it gets ready.

Bootstrap carousel video

1 Answers1