Заголовок видео 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;
}

Я нашел этот бит кода, но он остается в полноэкранном режиме независимо от того, что я делаю.

Может ли кто-нибудь предоставить дополнительную помощь, пожалуйста.

Ответы

Ответ 1

Это CSS на родительском div (#hero), который обрабатывает его. Используя абсолютное позиционирование и установку верхних, левых и правых свойств на ноль, растягивает его, чтобы он соответствовал области просмотра.

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

Ответ 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>

Ответ 3

просто используйте фишки jquery plugin, чтобы иметь отзывчивое видео. Это невероятно простой способ добиться того, чего вы хотите:

http://fitvidsjs.com/