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属性设置为零可将其拉伸以适合视口。

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

Answer 2

这是在特定的视窗高度生成类似airbnb的视频的代码，该视频具有响应性，居中对齐。替换视频源，它应该可以工作。

​

html, body{
	height: 100%;
}


/* header height sets static height needed for the video to be rendered in browser view port
 * for height in percent to work parent container needs to have percent value in this case body was given 100% height
*/
header{
	height: 90%;
	position: relative;
	background-color: red;
}

/* hero_area div containing video needs to be the size of parent div height, thus top, left, right, bottom helps to stretch hero_area div to the size of parent by giving position absolute.
 * overflow hides the video over-flowing outside the current size of hero_area. this can be helpful to control the visible part of video by pulling it using position value in video (top / bottom/ left/ right).
*/

.hero_area{
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	position: absolute;
	overflow: hidden;
}

audio, canvas, video{
	display: inline-block;
}

/* here bottom value can be set to 0 to always match the buttom part of the video with the buttom part of the containing div, in our case hero_area. I have used negative -150px to pull the video downward so that i can chop some unwanted area which overflow of parent(hero_area) will hide.
* as width is set to 100%, and height to auto, as the width of the browser changes height is auto calculated making the video responsive
*/

.hero_area video{
	bottom: -150px;
	position: absolute;
	width: 100%;
	height: auto;
}

<header id="container">
    <div class="hero_area">
    <video id="sensi-video" loop="loop" preload="auto" class="video-playing" autoplay="autoplay">
      <source type="video/webm" src="videos/sensi-vid.webm"></source>
      <source type="video/mp4" src="videos/sensi-vid.mp4"></source>
    </video>
  </div>
</header>

​

Answer 3

只需使用jquery插件fitvids即可获得响应式视频。这是一种非常简单的方法来实现你想要的东西：

http://fitvidsjs.com/