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.
<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.
<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.
<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.
<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.
<!-- 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.
