html – Airbnb视频标题

概述Airbnb最近推出了新的设计,其中包括视频标题.我无法弄清楚他们如何实现,视频标题总是与浏览器窗口的比例相同,而视频保持全宽并居中. 所以,我想要一个高达50％的高度视频标题,其中有一个垂直和水平中心的视频,无论我的浏览器窗口多大. HTML<video loop="loop" preload="auto" id="pretzel-video" class="video-playing"> Airbnb最近推出了新的设计,其中包括视频标题.我无法弄清楚他们如何实现,视频标题总是与浏览器窗口的比例相同,而视频保持全宽并居中.

所以,我想要一个高达50％的高度视频标题,其中有一个垂直和水平中心的视频,无论我的浏览器窗口多大.

HTML<vIDeo loop="loop" preload="auto" ID="pretzel-vIDeo" ><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;}

总结

以上是内存溢出为你收集整理的html – Airbnb视频标题全部内容，希望文章能够帮你解决html – Airbnb视频标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。