title: Fullscreen video without black borders
body: <p>The problem I have is that the video always gets black bars on the sides or on the top/bottom depending on the screen size. </p>
  
  <p><img src="https://i.stack.imgur.com/umS4u.png" alt="enter image description here"></p>
  
  <p><em>Any idea how to get it full screen always without showing that annoying black bars?</em> and without using a plugin.</p>
  
  <p>This is my markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div id="full-bg"&gt;
          &lt;div class="box iframe-box" width="1280" height="800"&gt;
              &lt;iframe src="http://player.vimeo.com/video/67794477?title=0&amp;amp;byline=0&amp;amp;portrait=0&amp;amp;color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>    #full-bg{
          width: 100%;
          height: 100%;
          img{
              display: none;
          }
          .iframe-box{
              width: 100%;
              height: 100%;
              position: absolute;
              background: url(../img/fittobox.png);
              left: 0 !important;
              top: 0 !important;
              iframe{
                  width: 100%;
                  height: 100%;
              }
          }
      }
  </code></pre>