Bootstrap carousel video autoplay

I am working on a project at work and they were interested in a video playing up top. I decided it might be more fun if you have a series of videos. I already had Bootstrap 4.3.1 doing things on the page and I almost always have JQuery you dont really need JQuery but I use it in this example. Anyway, I decided to play with the Bootstrap Carousel since its really simple. It works really well actually.

Bootstrap carousel video autoplay

When you slide next it starts the video. If you click in the video it either starts or pauses the displayed video. When the video ends it asks to replay. I will likely add volume and other fancy things, who knows? Heres the html and JS code. It needs some clean up but it gives you an idea of how this thing works. You can also download all the files and just run it on your server if you prefer.

Download: bootstrap4_carousel.zip

Verify SHA256: 7ac41a9618f2ca8457cbbabf99ad5ebca07bf6a43ed86867ba7ef13c2de3f651

  • Click to share on Twitter (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

Like this:

Like Loading...
Tags: bootstrap 4, carousel, html 5, jquery, video