我想制作一个全屏响应式横幅视频,例如https://yourkarma.com/。我做同样的..但问题是当我在移动设备和标签视图中检查视频高度将减少。我在我的CSS中做了一些更改,然后我得到结果但在移动和标签视图中丢失了大部分视频。我怎样才能实现与我的参考站点类似的东西?
CSS
.main_banner{
width:100%;
top:0px;
height:100%;
float:left;
position:absolute;
left:0;
overflow:hidden;
background-color:#141517;
}
.main_banner video{
width:auto;
}
HTML
<section class="main_banner">
<video autoplay loop preload>
<source src="videos/Meet_Eric_at_Aditi_Staffing_MP4.mp4" type="video/mp4">
<source src="videos/Meet_Eric_at_Aditi_Staffing_Ogv.ogv" type="video/ogg">
<source src="videos/Meet_Eric_at_Aditi_Staffing_Webm.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</section>
答案 0 :(得分:0)
我认为你应该忽略height:100%
。
如果您希望它具有响应性并使用屏幕的完整高度,请使用top:0; bottom:0
。
这需要位置:绝对或相对的iirc。
希望这有帮助。