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

处理它的是父 div (#hero) 上的 CSS。使用绝对定位并将 top、left 和 right 属性设置为零可拉伸(stretch)它以适合视口(viewport)。

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