title: Removing black borders on a vimeo iframe embed using CSS?
body: <p>I am trying to find a way to hide the black strips across the top and bottom of a vimeo video. I thought there might be a way to cover them up with CSS.</p>
  
  <p>I basically wanted to achieve what this person wanted to achieve with an image in the link below except I want to do it with an embedded video whilst keeping it repsonsive.</p>
  
  <p><a href="https://stackoverflow.com/questions/13220715/removing-black-borders-43-on-youtube-thumbnails">Removing black borders 4:3 on youtube thumbnails</a></p>
  
  <p>Many thanks.</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;section class="d5-d13 c5-c13 b5-b13 a5-a13 video"&gt;
  
     &lt;div class='embed-container'&gt;
        &lt;iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
        webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;
     &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  padding-top: 30px; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
  height: auto; 
  }
  
  .embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  }
  </code></pre>