CSS - Background Video Seems To Zoom

问题

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

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

I've copied this CSS from a tutorial.

Here's a plunker: http://plnkr.co/edit/Rw4Wr4gWUru9U07ZufLM?p=preview

回答1:

try this. set a max-width and max-height

.home-banner video {

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

}

回答2:

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

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

来源：https://stackoverflow.com/questions/29118028/css-background-video-seems-to-zoom