Video
Bootstrap Video
Bootstrap's video gallery is a component that compiles a number of media into one interactive collection presented in a basic or a more advanced lightbox.
It can be resized as desired, and thanks to Bootstrap's responsiveness, it will adjust to the screen size.
Examples of Bootstrap video use:
- Trip video on a travel blog
- Company promotional video as background
See the following Bootstrap video examples:
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap
5.
Go to docs v.5
Responsive video
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Video IFrame
YouTube IFrame
Vimeo IFrame
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg" allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
</div>
Video within modals MDB Pro component
<!-- Grid row -->
<div class="row">Video background
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-4">
<!--Modal: Name-->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U"
allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<span class="mr-4">Spread the word!</span>
<a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>
<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
<a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-1.webp" alt="video"
data-toggle="modal" data-target="#modal1"></a>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!--Modal: Name-->
<div class="modal fade" id="modal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTcNtgA6gHs"
allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<span class="mr-4">Spread the word!</span>
<a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>
<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
<a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-2.webp" alt="video"
data-toggle="modal" data-target="#modal6"></a>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!--Modal: Name-->
<div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"
allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<span class="mr-4">Spread the word!</span>
<a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>
<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
<a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-3.webp" alt="video"
data-toggle="modal" data-target="#modal4"></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
$('#modal1').on('hidden.bs.modal', function (e) {
// do something...
$('#modal1 iframe').attr("src", $("#modal1 iframe").attr("src"));
});
$('#modal6').on('hidden.bs.modal', function (e) {
// do something...
$('#modal6 iframe').attr("src", $("#modal6 iframe").attr("src"));
});
$('#modal4').on('hidden.bs.modal', function (e) {
// do something...
$('#modal4 iframe').attr("src", $("#modal4 iframe").attr("src"));
});
Video carousel
<!--Carousel Wrapper-->
<div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
<li data-target="#video-carousel-example2" data-slide-to="1"></li>
<li data-target="#video-carousel-example2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="carousel-item active">
<!--Mask color-->
<div class="view">
<!--Video source-->
<video class="video-fluid" autoplay loop muted>
<source src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
</video>
<div class="mask rgba-indigo-light"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Light mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.First slide -->
<!-- Second slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<!--Video source-->
<video class="video-fluid" autoplay loop muted>
<source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />
</video>
<div class="mask rgba-purple-slight"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Super light mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.Second slide -->
<!-- Third slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<!--Video source-->
<video class="video-fluid" autoplay loop muted>
<source src="https://mdbootstrap.com/img/video/cube.mp4" type="video/mp4" />
</video>
<div class="mask rgba-black-strong"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Strong mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.Third slide -->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#video-carousel-example2" 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="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--Carousel Wrapper-->
Full page video carousel
Click the button below to see a live preview.
Video background MDB Pro component
Click the image below to see a live preview.
<html lang="en" class="full-height">
[ . . . ]
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#"><strong>MDB</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<!--Intro Section-->
<section class="view intro-video">
<video poster="https://mdbootstrap.com/img/Photos/Others/background.webp" playsinline autoplay muted loop>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
</video>
<div class="hm-gradient">
<div class="full-bg-img">
<div class="container flex-center">
<div class="row pt-5 mt-3">
<div class="col-lg-6 wow fadeIn mb-5 text-center text-lg-left">
<div class="white-text">
<h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum
dolor sit amet</h1>
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
<p class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente,
fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</p>
<br>
<a class="btn btn-outline-white wow fadeInLeft" data-wow-delay="0.3s">Just do it!</a>
</div>
</div>
<div class="col-lg-6 wow fadeIn">
<div class="embed-responsive embed-responsive-16by9 wow fadeInRight">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IQyauRAxvjI"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<!--Main Navigation-->
.top-nav-collapse {
background-color: #7d8488 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #7d8488 !important;
}
}
.hm-gradient .full-bg-img {
background: -moz-linear-gradient(45deg, rgba(242, 34, 50, 0.5), rgba(255, 187, 54, 0.6) 100%);
background: -webkit-linear-gradient(45deg, rgba(242, 34, 50, 0.5), rgba(255, 187, 54, 0.6) 100%);
background: linear-gradient(to 45deg, rgba(29, 236, 197, 0.4), rgba(96, 0, 136, 0.4) 100%);
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 700px;
}
}
Video with autoplay option
You can use any of webm ogv mp4 video formats within your HTML file.
Autoplay in Google Chrome
If you want to use a video with the autoplay option in Chrome you need to add
mutedin the video tag because Google Chrome block autoplay video with sound (even if it doesn't have any sound).
<video class="video-fluid z-depth-1" autoplay loop controls muted>
<source src="https://mdbootstrap.com/img/video/Sail-Away.mp4" type="video/mp4" />
</video>
.video-fluid {
width: 100%;
height: auto;
}