我有一个简单的html
页面,其中我添加了一个背景视频剪辑和一个包含div
和h1
元素的p
。
如果调整浏览器窗口大小但没有垂直响应,则背景视频水平完全响应。调整浏览器窗口大小后,视频从屏幕底部垂直缩小。 如何让这个视频垂直响应??
这是我的问题的直观表示
正如您所看到的,当调整浏览器窗口大小时,视频会从底部垂直缩小。需要帮助解决此问题。
这是我的代码
<body>
<div class="video-container">
<video src="Lamp%20-%2011186.mp4" autoplay loop muted></video>
</div>
</body>
body{
margin: 0;
padding: 0;
}
.video-container{
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
padding: 0;
}
video{
width: 100%;
}
答案 0 :(得分:0)
将CSS代码修改为此代码并重试。它应该工作。 vh使视频响应浏览器视口高度,并在调整大小时调整为浏览器高度的70%。
body{
margin: 0;
padding: 0;
}
.video-container{
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
padding: 0;
}
video{
width: 100%;
height: 70vh;
}