Edit in JSFiddle

<div class="responsive-iframe">
	<div style="padding-bottom:56.25%;"></div>
  <iframe src="https://www.youtube.com/embed/KqtvA6xo4DE?ecver=2&rel=0&modestbranding=1" allowfullscreen></iframe>


NOTES: For creating responsive iframes. 

• The main container <div class="responsive-iframe"> can be sized to any width
• The child div with the padding bottom calculates own height, based on the width of its parent. This is how height percentages work in CSS – they are calculated based on the width of their parent.
• With the percentage amount matching the aspect ratio of the content in the iframe, the iframe will continue to resize in proportion.

html, body {
  color: #fff;
  height: 100%;
  margin: 0;
  font-family: 'helvetica';

.responsive-iframe {
  background: #161a1f;
  width: 100%;
  position: relative;

.responsive-iframe iframe {
  border: none;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;