Jumbotron Div背景ビデオ

Question

私は、動作するコードのロードを探していましたが、これまでのところ運が良かったわけではありません。私はウェブサイトのジャンボトロンにビデオを挿入したい。私はビデオを配置したい場所を

<div class="center jumbotron"> 

      <h1 class="txtjumbo">We are engage ME!</h1> 
      <p class="txtjumbo">We are results driven.</p> 
      <p><a class="btn center btn-primary btn-lg" id="botjumbo" href="#" role="button">Learn more</a></p> 
     </div> 

そして、これは私のウェブサイトがどのように見えるかです：

私はHTMLでこのdiv要素を持っています。理想的には、背景ビデオはウィンドウサイズの100％ですが、これを達成でき、500のCSSコードを試しました！

Answer 1

これは、私はそれを行うだろうかです。 codepen上のブツに

HTML

<div class="jumbotron"> 
    <video id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted"> 
     <source src="/PATH/TO/VIDEOFILE" type="video/TYPE" /> 
    </video> 
    <div class="center jumbovidtext"> 
     <h1 class="txtjumbo">We are engage ME!</h1> 
     <p class="txtjumbo">We are results driven.</p> 
     <p><a class="btn center btn-primary btn-lg" id="botjumbo" href="#" role="button">Learn more</a></p> 
    </div> 
</div> 

CSS

#bg-video { 
    top: 0px; 
    left: 0px; 
    position: absolute; 
    width: 100%; 
} 
.jumbovidtext { 
    z-index: 1; 
    position: absolute; 
} 

Here's'aリンク：http://codepen.io/anthyG/pen/NNEbyg

Answer 2

覚えておくべき大きなものはz-indexルール、z-index: -1の、具体的な動作ですこれは他のすべての背後にあるアイテムを置く。

私のバージョンは、AnthyGのcodepenから展開され、変更されています（多くの例がhttp://codepen.io/kenbellows/pen/ZWmgRB）。私はまた、ほとんどの個人的な美的好みのためにposition: fixedにビデオを設定しましたが、position: absoluteと同じように動作します。

#bg-video { 
 
    top: 0px; 
 
    left: 0px; 
 
    position: fixed; 
 
    z-index: -1; 
 
    width: 100%; 
 
} 
 

 
.jumbovidtext { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 1em; 
 
} 
 

 
.jumbotron { 
 
    background: rgba(128,128,128,0.5); 
 
    margin: 25vh 0; 
 
    overflow-y: hidden; 
 
} 
 

 
main { 
 
    /* Give the main content container a solid background color to hide the fixed position video */ 
 
    background: #fff; 
 
    padding: 2em; 
 
}

<nav id="navbar" class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img alt="Brand" class="img-responsive pull-left" id="brand-img" src="https://placehold.it/32x32" /> 
 
     My Company 
 
     </a> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<div class="jumbotron"> 
 
    <video id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted"> 
 
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg" /> 
 
    </video> 
 
    
 
    <div class="center jumbovidtext text-center"> 
 
    <h1 class="txtjumbo">We are engage ME!</h1> 
 
    <p class="txtjumbo">We are results driven.</p> 
 
    <p><a class="btn center btn-primary btn-lg" id="botjumbo" href="#" role="button">Learn more</a></p> 
 
    </div> 
 
</div> 
 

 
<main> 
 
    <div class="container"> 
 
    <!-- primary content here --> 
 
    </div> 
 
</main>