Question

我最近不得不搞乱网络开发并且一直在使用bootstrap。我一直试图做的一件事是复制AirBNB如何在他们的网站上播放视频，内容继续在其下面。我一直试图在引导程序中复制这种外观，但是我无法保持视频播放的外观和感觉，并且使用引导程序很好。

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我觉得它很好，但移动设备会更难。

Popover

Bootstrap和绝对定位的视频代码

1 个答案: