<!-- 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>
实例二
<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>
示例三
<!-- Grid row -->
<div class="row">
<!-- 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="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></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.jpg" 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="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></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.jpg" 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="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></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.jpg" alt="video" data-toggle="modal" data-target="#modal4"></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<script>
$('#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"));
});
</script>示例5
<!--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-->
示例6
<html>
[ . . . ]
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div>
<a href="#"><strong>MDB</strong></a>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Profile</a>
</li>
</ul>
<form>
<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.jpg" playsinline autoplay muted loop>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
</video>
<div>
<div>
<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>
<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 src="https://www.youtube.com/embed/IQyauRAxvjI" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<!--Main Navigation-->
<style>
.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;
}
}
</style>示例7
<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>
<style>
.video-fluid {
width: 100%;
height: auto;
}
</style>