"Video Carousal"
Bootstrap 4.0.0 Snippet by Noman1416

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- googleapis css --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <body> <!--Carousel Wrapper--> <div id="video-carousel-example" class="carousel slide carousel-fade" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#video-carousel-example" data-slide-to="0" class="active"></li> <li data-target="#video-carousel-example" data-slide-to="1"></li> <li data-target="#video-carousel-example" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <video class="video-fluid" autoplay loop> <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" /> </video> </div> <div class="carousel-item"> <video class="video-fluid" autoplay loop> <source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" /> </video> </div> <div class="carousel-item"> <video class="video-fluid" autoplay loop> <source src="https://mdbootstrap.com/img/video/Agua-natural.mp4" type="video/mp4" /> </video> </div> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#video-carousel-example" 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-example" 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--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <!-- custom js --> <script type="text/javascript" src="js/custom.js"></script> </body> </html>

Related: See More

Paper Kit 2
Video list thumbnails
Responsive Video Wall
Full Width Screen Video Background

Questions / Comments: