Question

我一直在寻找有效的代码，但到目前为止还没有运气。我想在网站的jumbotron中插入一个视频。

我在HTML中有这个div：

<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代码！

Answer 1

要记住的一件大事是z-index规则，特别是z-index: -1的行为，它将项目置于其他所有内容之后。

我的版本，从AnthyG的codepen扩展和修改如下（在http://codepen.io/kenbellows/pen/ZWmgRB处更完整的例子）。我还将视频设置为position: fixed，主要用于个人审美偏好，但它与position: absolute的工作方式相同。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

我就是这样做的。

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

这是＆＃39;指向codepen上的东西的链接：http://codepen.io/anthyG/pen/NNEbyg

Jumbotron Div背景视频

2 个答案: