Jumbotron Div背景視頻

我一直在尋找加載代碼的工作，但迄今沒有幸運。我想插入一個視頻在網站即時通訊的jumbotron。Jumbotron Div背景視頻

我有這個div在HTML：

<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>

這是我的網站看起來和我想要的視頻。理想情況下，背景視頻將是窗口大小的100％，但可以實現這一點，我嘗試了500個CSS代碼！

來源

2016-04-30 Tomas Alonso Rehor

這是我會怎麼做。

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鏈接啄上codepen：http://codepen.io/anthyG/pen/NNEbyg

來源

2016-05-01 19:49:27 AnthyG

一個建議：擴大.jumbovidtext類覆蓋整個視頻 http://codepen.io/kenbellows/pen/ZWmgRB –

大的事要記住的是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>

來源

2016-05-03 21:03:17

Jumbotron Div背景視頻

回答

相關問題