垂直响应背景视频

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

标签: html css video

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

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

这是我的问题的直观表示

enter image description here

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

这是我的代码

相关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;
}