Airbnb视频标题

Question

Airbnb最近推出了包括视频标题在内的新设计.我无法弄清楚他们如何实现视频标题始终与浏览器窗口的比例相同,而视频保持全宽和居中.

所以,我想要一个50%高的视频标题,其中包含一个垂直和水平居中的视频,无论我的浏览器窗口有多大.

HTML

<video loop="loop" preload="auto" id="pretzel-video" class="video-playing">
<source src="//a0.muscache.com/airbnb/static/Paris-P1-1.mp4" type="video/mp4">
<source src="//a0.muscache.com/airbnb/static/Paris-P1-0.webm" type="video/webm">
</video>

CSS

#pretzel-video {
bottom: 0;
position: absolute;
width: 100%;
}

video {
display: inline-block;
}

我找到了这段代码,但无论我在做什么,这都会保持全屏.

请有人提供进一步的帮助.

Answer 1

它#hero是处理它的父div()上的CSS .使用绝对定位并将顶部,左侧和右侧属性设置为零会拉伸它以适合视口.

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