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背景视频

回答

相关问题