应用错误收集

垂直响应背景视频

时间：2017-12-07 17:44:21

标签： html css video

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

如果调整浏览器窗口大小但没有垂直响应，则背景视频水平完全响应。调整浏览器窗口大小后，视频从屏幕底部垂直缩小。 如何让这个视频垂直响应？？

这是我的问题的直观表示

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

这是我的代码

相关HTML代码

<body>

    <div class="video-container">
        <video src="Lamp%20-%2011186.mp4" autoplay loop muted></video>
    </div>  

</body>

相关CSS代码

body{
    margin: 0;
    padding: 0;
}

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

video{
    width: 100%;
}

1 个答案:

答案 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;
}