CSS - 背景视频似乎缩放

Question

我正在尝试将背景视频引入我网站的某个部分。

此部分的定义高度为 530 像素。

但是，图像似乎放大了。

HTML：

<section class="home-banner">

    <video poster="" preload="auto" loop="loop" autoplay="">
        <source type="video/webm" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.mp4"></source>
        <source type="video/mp4" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.webm"></source>
    </video>

</section>

CSS：

html {
    min-height: 100%;
    position: relative;
}

body {
    margin: 0 0 150px;
}
body, h1, h2, h3, dt, dd {
    margin: 0 auto;
    padding: 0;
}


.home-banner {
    display: block;
    height: 530px;
    overflow: hidden;
    position: relative;
}

.home-banner video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

我从教程中复制了这个 CSS。

这是一个笨蛋：http://plnkr.co/edit/Rw4Wr4gWUru9U07ZufLM?p=preview

Answer 1

删除min-width: 100% 和min-height: 100% 并添加max-width: 100%。您的代码将如下所示：

.home-banner video {
    left: 50%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

由于.home-banner 具有固定宽度，您将在窄屏幕上看到视频上方和下方的空白。我建议将您的 .home-banner 课程更改为以下内容（因此它将随视频缩放）：

.home-banner {
    display: block;
    height: auto;
    overflow: hidden;
    position: relative;
    padding-bottom: 56.7%; /* you can change this to match the width/height proportion of the video */
    background: red;
}

Answer 2

试试这个。设置最大宽度和最大高度

.home-banner video {

  max-height: 100%;
  max-width: 100%;

}