垂直响应背景视频答案

【问题标题】：Vertically Responsive background video垂直响应背景视频
【发布时间】：2017-12-07 17:44:21
【问题描述】：

我有一个简单的html 页面，我在其中添加了一个背景视频剪辑和一个包含h1 和p 元素的div。

如果调整浏览器窗口的大小，背景视频会在水平方向完全响应，但它在垂直方向上没有响应。调整浏览器窗口大小时，视频会从屏幕底部垂直收缩。 我怎样才能让这个视频也垂直响应？

这是我的问题的直观表示

如您所见，当调整浏览器窗口大小时，视频会从底部垂直缩小。需要帮助解决此问题。

这是我的代码

相关CSS代码

body{
    margin: 0;
    padding: 0;
}

.video-container{
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
}

video{
    width: 100%;
}

【问题讨论】：

尝试在视频中使用 vh 而不是 % 来表示高度
试过了，没用...
在视频上设置height...？
@JeromeIndefenzo 设置高度使其水平无响应

标签： html css video

【解决方案1】：

将您的 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;
}

【讨论】：

现在，当浏览器窗口最大化时，视频不适合屏幕宽度和高度。此外，当浏览器窗口调整为更小的宽度时，它会移动到浏览器的中间
这只是一个示例，您可以根据自己的代码调整视频高度以适应。你真的不必使用“70”
@Nick 视频不是图像，您不能让它们以不同的纵横比响应。如果视频的宽高比为 16:9，并且无论您如何做出响应，无论您缩小或扩大视口，它都不会改变该比例。

相关HTML代码

相关CSS代码