CSS-背景视频似乎可以缩放 [英] CSS - Background Video Seems To Zoom

问题描述

我正在尝试将背景视频介绍给我网站的一部分.

I am trying to introduce a background video to a section of my site.

此部分的定义高度为530px.

This section has a defined height of 530px.

但是，图像似乎放大了.

However, the images seems too zoomed in.

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.

I've copied this CSS from a tutorial.

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

推荐答案

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

Remove min-width: 100% and min-height: 100% and add max-width: 100%. Your code will look like this:

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

由于.home-banner具有固定的宽度，因此您将在狭窄的屏幕上看到视频上方和下方的空白.我建议将您的.home-banner类更改为以下内容(以便随视频缩放):

Since .home-banner has a fixed width, you will see whitespace above and below the video on a narrow screen. I would suggest changing your .home-banner class to the following (so it will scale with the video):

.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;
}

这篇关于CSS-背景视频似乎可以缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！