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; }
我发现这一点代码,但是不管我在做什么,这都是全屏的.
任何人都可以提供进一步的帮助.
解决方法
这是处理它的父div(#hero)上的CSS.使用绝对定位并设置顶部,左侧和右侧属性为零,以使其适合视口.
#hero { z-index: -1; position: absolute; right: 0; left: 0; top: 0; height: 600px; overflow: hidden; min-width: 1045px; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。