title: CSS - Background Video Seems To Zoom
body: <p>I am trying to introduce a background video to a section of my site.</p>
  
  <p>This section has a defined height of 530px.</p>
  
  <p>However, the images seems too zoomed in.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="home-banner"&gt;
  
      &lt;video poster="" preload="auto" loop="loop" autoplay=""&gt;
          &lt;source type="video/webm" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.mp4"&gt;&lt;/source&gt;
          &lt;source type="video/mp4" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.webm"&gt;&lt;/source&gt;
      &lt;/video&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I've copied this CSS from a tutorial.</p>
  
  <p>Here's a plunker: <a href="http://plnkr.co/edit/Rw4Wr4gWUru9U07ZufLM?p=preview" rel="nofollow">http://plnkr.co/edit/Rw4Wr4gWUru9U07ZufLM?p=preview</a></p>