Video

Bootstrap Video - free examples, templates & tutorial

Responsive video templates for Bootstrap 5. It can be used in carousels, modals, as a video background, for presenting a video gallery or simply as a player.

YouTube iFrame

A simple template for embedding a YouTube video in Bootstrap 5 layout, with the use of an iframe.

Show code Edit in sandbox

HTML

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen></iframe>
</div>

Vimeo iFrame

A simple template for embedding a Vimeo video in Bootstrap 5 layout, with the use of an iframe.

Show code Edit in sandbox

HTML

<iframe src="https://player.vimeo.com/video/137857207" title="Vimeo video" allowfullscreen></iframe>

Responsive mp4 file

Use .w-100 class to make the video responsive and always adjusted to the width of its parent.

Show code Edit in sandbox

HTML

<video class="w-100" autoplay loop muted>
  <source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />
</video>

Hover to play

Hover over the video to start playing - check out other hover effects.

Show code Edit in sandbox

HTML
JavaScript

<video src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" loop class="hover-to-play w-100">
</video>

const clip = document.querySelectorAll(".hover-to-play");
for (let i = 0; i < clip.length; i++) { clip[i].addEventListener("mouseenter", function (e) { clip[i].play();
  }); clip[i].addEventListener("mouseout", function (e) { clip[i].pause(); }); }

Video carousel slider

A simple video slider with arrow controls.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Show code Edit in sandbox

HTML

<!-- Carousel wrapper -->
<div id="carouselVideoExample" data-mdb-carousel-init class="carousel slide carousel-fade" data-mdb-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselVideoExample" data-mdb-slide-to="0" class="active"
      aria-current="true" aria-label="Slide 1"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselVideoExample" data-mdb-slide-to="1"
      aria-label="Slide 2"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselVideoExample" data-mdb-slide-to="2"
      aria-label="Slide 3"></button>
  </div>

  <!-- Inner -->
  <div class="carousel-inner">
    <!-- Single item -->
    <div class="carousel-item active">
      <video class="img-fluid" autoplay loop muted>
        <source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4" type="video/mp4" />
      </video>
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        </p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <video class="img-fluid" autoplay loop muted>
        <source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" />
      </video>
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <video class="img-fluid" autoplay loop muted>
        <source src="https://mdbcdn.b-cdn.net/img/video/Agua-natural.mp4" type="video/mp4" />
      </video>
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        </p>
      </div>
    </div>
  </div>
  <!-- Inner -->

  <!-- Controls -->
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselVideoExample"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselVideoExample"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!-- Carousel wrapper -->

Full page video carousel background

An example of full-page usage of the video carousel with text overlay.

Click on the image to see live demo.

Video

Bootstrap Video - free examples, templates & tutorial

YouTube iFrame

Vimeo iFrame

Responsive mp4 file

Hover to play

Video carousel slider

First slide label

Second slide label

Third slide label

Full page video carousel background

Related resources