title: How to embed full screen responsive YouTube video with custom height
body: <p>I'm trying to embed a YouTube video and have found a few answers here on how to accomplish that however, when I embed the video I would like to add a custom height of 500px to the iframe. The idea is to maintain the aspect ratio but the iframe (visible area) of the video is smaller in height. I don't mind if the top and bottom is cut off (not fully visible) so long as the height is 500px and it remains full width with no black bars on the sides of the video. </p>
  
  <p>This is what I have but don't know how to tweak the height without black bar appearing.</p>
  
  <pre><code> &lt;style&gt;.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&lt;/style&gt;&lt;div class='embed-container'&gt;&lt;iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;
  </code></pre>