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。使用绝对定位并将顶部，左侧和右侧属性设置为零会拉伸它以适合视口。

#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/

Airbnb视频标题

3 个答案: