Ratio

The o-ratio object is used for flexible media embeds – such as videos, slideshows, or even images – that need to retain a specific aspect ratio but adapt to the width of their containing element.

Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Media Embeds

By default - embed, iframe, object, video, and img child elements all adjust to the aspect ratio automatically and do not require a o-ratio-item class.

<div class="o-ratio  o-ratio--16x9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/i77jqg9hOBs" frameborder="0" allowfullscreen></iframe>
</div>

Other Embeds

If you’d like to place any other type of element, it will require the class o-ratio-item, for example:

Bonsoir, Elliot.

<div class="o-ratio  o-ratio--4x3">
  <div class="o-ratio-item  u-bgGrayLight">
    <div class="u-txtCenter  u-alignMiddleRel">
      <h1>Bonsoir, Elliot.</h1>
    </div>
  </div>
</div>