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>

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>