引导和绝对定位的视频标签

Question

我最近一直在忙于 Web 开发，并且经常使用 bootstrap。我一直在尝试做的一件事是复制 AirBNB 如何在他们的网站上播放视频，并且内容在其下方继续播放。我一直在尝试在 bootstrap 中复制这种外观，但我无法保持他们视频播放方式的外观和感觉，并且无法让 bootstrap 很好地配合它。

HTML：

<div class="container">
    <div class="hero">
        <video loop="loop"preload="auto" autoplay="true">
            <source type="video/mp4" src="https://a0.muscache.com/airbnb/static/Croatia-P1-0.mp4"></source>
            <source type="video/webm" src="https://a0.muscache.com/airbnb/static/Croatia-P1-0.webm"></source>
        </video>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1>This is a test</h1>
        </div>
    </div>
</div>

CSS：

.hero {
z-index: -1;
position: absolute;
right: 0;
left: 0;
top: 0;
height: 600px;
overflow: hidden ;
min-width: 1045px;
}

这是我一直在玩的 jsfiddle：

http://jsfiddle.net/z2ps0q5n/

任何建议将不胜感激。据我所知，它源于页面上视频的绝对位置。据我了解，这就是提供 airbnb 令人敬畏的外观和感觉的原因。

Answer 1

有了这点css我觉得还不错，但是移动端会比较难。

.hero {
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 100%;
}

.container {
    width: 100%;
    overflow: hidden;
}