title: CSS - 100% width of Youtube embed video
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="video"&gt;
    &lt;iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&amp;amp;rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;autoplay=1&amp;amp;mute=1&amp;amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.video {
    width: 100%;
    height: 200px;
    border: 1px solid red;
    overflow: hidden;
    position: relative;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  </code></pre>
  
  <p><strong>JSFIDDLE:</strong> <a href="http://jsfiddle.net/pj2utq4v/" rel="noreferrer">http://jsfiddle.net/pj2utq4v/</a></p>
  
  <p><strong>QUESTION:</strong> How to force iframe to be 100% of parent div width. Since parent div is only 200px in height, iframe video would be cropped which is also okay with me.</p>