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;
}
我发现这一点代码,但是不管我在做什么,这都是全屏的.
任何人都可以提供进一步的帮助.
