javascript - Bootstrap video jumbotron -
i'm trying video cover bootstrap jumbotron no success. seems simple thing do, try seems fail.
i've tried solution posted here no success. i've tried setting position of video absolute, , setting sides 0, doesn't seem work either. doing wrong?
this shows going on: https://jsfiddle.net/kae4q601/
.jumbotron{ position: relative; /* tried setting height. didnt work either */ /* height: 200px; */ } #video-background { position: absolute; bottom: 50%; right: 50%; -webkit-transform: translatex(-50%) translatey(-50%); transform: translatex(-50%) translatey(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; } <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <video id="video-background" preload muted autoplay loop> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> </video> <div class="container"> hello world </div> </div>
looks you've got lot of unnecessary css going on. start define jumbotron z-index in order keep gray padding in background.
.jumbotron{ position: relative; z-index:-101; } next cleaner simpler code video background so:
#video-background { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; width:100%; } here's fiddle https://jsfiddle.net/kae4q601/5/ let me know if trying achieve.
Comments
Post a Comment