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

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -