"Header+Video+BS4-MDB [2018 actualizado]"
Bootstrap 4.0.0 Snippet by justjeiyd

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>Header + Video</title> <link rel="stylesheet" href="https://headervideo.github.io/hvheadervideo/css/fontawesome.min.css"> <link href="https://headervideo.github.io/hvheadervideo/css/bootstrap.min.css" rel="stylesheet"> <link href="https://headervideo.github.io/hvheadervideo/css/mdb.min.css" rel="stylesheet"> <link href="https://headervideo.github.io/hvheadervideo/css/style.css" rel="stylesheet"> </head> <body> <!--Main Navigation--> <header> <div class="view hm-white-light jarallax" data-jarallax='{"speed": 0.2}' data-jarallax-video="https://www.youtube.com/watch?v=4Q0ijG0ylr4"> <div class="full-bg-img"> <div class="container flex-center"> <div class="row"> <div class="col-md-12 wow fadeIn"> <div class="text-center text-white"> <h1 class="display-2 mb-2 wow fadeInDown" data-wow-delay="0.3s">Header + Video</h1> <h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">Para poner imagen o video de fondo. <br>Realizado con <b>Bootstrap 4</b> y <b>Material Design para Bootstrap</b></h5> <a class="btn btn-danger btn-lg wow fadeInDown" data-wow-delay="0.4s"><i class="fa fa-diamond"></i> Administrador</a> <a class="btn btn-primary btn-lg wow fadeInDown" data-wow-delay="0.4s"><i class="fa fa-shield"></i> Moderador</a> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://headervideo.github.io/hvheadervideo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="https://headervideo.github.io/hvheadervideo/js/popper.min.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/bootstrap.min.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/mdb.min.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/jarallax.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/jarallax-video.js"></script> <script> new WOW().init(); </script> </body> </html>

Related: See More

Login and Register Modal
Resize & Fixed Header (shrinking header)
Video list thumbnails
Header Curtain Effect

Questions / Comments: