"Full Width - Video Background Header 2018"
Bootstrap 3.3.0 Snippet by badrrehman

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Video Setting</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Lobster|Sedgwick+Ave+Display" rel="stylesheet"> <style type="text/css"> .video-setting{ position: absolute; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .txt{ position: relative; padding-bottom:424px; background-color: rgba(23, 20, 130, 0.5); } .links > a{ text-align: center; padding-left: 50px; width: 30%; color: #fff; font-size: 50px; font-weight: bold; font-family: 'Lobster', cursive; } #videoheader .video-sample.visible { opacity: 1; } #videoheader .video-sample { z-index: 0; opacity: 0; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; -webkit-object-fit: cover; -moz-object-fit: cover; -ms-object-fit: cover; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity .7s linear; -moz-transition: opacity .7s linear; transition: opacity .7s linear; } @media screen and (max-width: 770px){ .visible { opacity: 0; } } body{ background-color: #171482; } </style> </head> <body> <section id="videoheader" style="height: 16px;"> <video class="video-sample visible" autoplay="" loop="" muted=""> <source src="http://veronicarodriguez.online/video/sample.MP4" type="video/mp4"> </video> <div class="container-fluid txt"> <div class="links"> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> <a href="#">Sample</a> </div> <div class="container" style="font-size: 60px; font-weight: bold; margin-top: 50px; color: #fff;"> Author:: <a style="font-size: 60px; font-weight: bold; margin-top: 50px; color: red;" href="https://twitter.com/BadrRehman">@BadrRehman</a> </div> </div> </section> </body> </html>

Related: See More

Header + Video + BS4 + MDB [2017]
Image Tiles Full width
Resize & Fixed Header (shrinking header)

Featured Templates

Questions / Comments: