Flex Embed

For use with media embeds (videos, slideshows, etc.) that need to retain a specific aspect ratio while adapting to the width of their containing element.

The .FlexEmbed-ratio element is a hack, but a useful one; it insures that max-height values are respected. It also allows one-off using a style attribute and padding-top.

<div class="FlexEmbed">
  <div class="FlexEmbed-ratio"></div>
  <iframe class="FlexEmbed-content" width="420" height="315" src="https://www.youtube.com/embed/Nx64_N4AA04"
   frameborder="0" allowfullscreen></iframe>
</div>
<div class="FlexEmbed">
  <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
  <iframe class="FlexEmbed-content" width="420" height="315" src="https://www.youtube.com/embed/Nx64_N4AA04"
   frameborder="0" allowfullscreen></iframe>
</div>
<div class="FlexEmbed">
  <div class="FlexEmbed-ratio FlexEmbed-ratio--4by3"></div>
  <iframe class="FlexEmbed-content" width="420" height="315" src="https://www.youtube.com/embed/Nx64_N4AA04"
   frameborder="0" allowfullscreen></iframe>
</div>