Question

我正在尝试将一个背景视频添加到网站，我试图使其高度等于400px，宽度等于100％。但是，当我添加400px高度时，其宽度变小。我不是全屏视频，我希望它只有400px的高度（或更大）和100％的宽度，就像在airbnb.com上一样。

这是HTML：

    <html>
    <head>

        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="bootstrap/js/jquery-3.1.0.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div id="videoDiv">
            <video autoplay loop mute id="video">
                <source src="video/video.mp4" type="video/mp4">
            </video> 
        </div>
        <div>
            <h1>Hello</h1>
        </div>
    </body>
</html>

这是CSS：

    #videoDiv{
    height: 400px!important;
}
#video{
    position: fixed;
    max-height: 400px!important;
    min-width: 100%;
}

Here是它的链接。请帮助！

Answer 1

视频元素的默认样式表为object-fit: contain;，因此它始终保持其尺寸比率。所以你需要做的就是“填充”而不是覆盖它。像这样：

#video{
    position: fixed;
    max-height: 400px;
    min-width: 100%;
    object-fit: fill;
}

使HTML背景视频高度小，宽度100％

1 个答案: