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代码!
答
这是我会怎么做。
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
答
大的事要记住的是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>
一个建议:扩大.jumbovidtext类覆盖整个视频 http://codepen.io/kenbellows/pen/ZWmgRB –