html – Airbnb视频标题

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

我发现这一点代码,但是不管我在做什么,这都是全屏的.

任何人都可以提供进一步的帮助.

解决方法

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

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