<style>
.Test-area {
    max-width: 500px;
    margin-bottom: 1em;
}
.Test-area img {
    height: auto;
    max-width: 100%;
}
.Test-area iframe {
    height: 100%;
    width: 100%;
}
</style>
<div class="Test-area">
  <div class="l-flexEmbed">
    <div class="l-flexEmbed-ratio"></div>
    <div class="l-flexEmbed-content">
     <iframe width="1200" height="1200" src="http://www.youtube.com/embed/BOOljk_LOcs" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
<div class="Test-area">
  <div class="l-flexEmbed">
    <div class="l-flexEmbed-ratio"></div>
    <div class="l-flexEmbed-content">
     <img width="600" height="600" src="http://lorempixel.com/600/600/nature" alt="">
    </div>
  </div>
</div>

<div class="Test-area">
 <div class="l-flexEmbed">
   <div class="l-flexEmbed-ratio" style="padding-bottom:50%"></div>
   <div class="l-flexEmbed-content">
     <iframe width="1200" height="1200" src="http://www.youtube.com/embed/BOOljk_LOcs" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
</div>

<div class="Test-area">
 <div class="l-flexEmbed" style="max-height: 200px;">
   <div class="l-flexEmbed-ratio"></div>
   <div class="l-flexEmbed-content">
     <iframe width="1280" height="1280" src="http://www.youtube.com/embed/BOOljk_LOcs" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
</div>

<div class="Test-area">
 <div class="l-flexEmbed" style="max-width: 200px;">
   <div class="l-flexEmbed-ratio"></div>
   <div class="l-flexEmbed-content">
     <iframe width="1280" height="1280" src="http://www.youtube.com/embed/BOOljk_LOcs" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
</div>

<div class="Test-area">
 <div class="l-flexEmbed">
   <div class="l-flexEmbed-ratio l-flexEmbed-ratio--3by1"></div>
   <div class="l-flexEmbed-content">
     <img width="600" height="200" src="http://lorempixel.com/600/200/nature" alt="">
   </div>
 </div>
</div>

<div class="Test-area">
 <div class="l-flexEmbed">
   <div class="l-flexEmbed-ratio l-flexEmbed-ratio--2by1"></div>
   <div class="l-flexEmbed-content">
     <img width="600" height="300" src="http://lorempixel.com/600/300/nature" alt="">
   </div>
 </div>
</div>

<div class="Test-area">
 <div class="l-flexEmbed">
   <div class="l-flexEmbed-ratio l-flexEmbed-ratio--16by9"></div>
   <div class="l-flexEmbed-content">
     <img width="500" height="280" src="http://lorempixel.com/500/280/nature" alt="">
   </div>
 </div>
</div>

<div class="Test-area">
 <div class="l-flexEmbed">
   <div class="l-flexEmbed-ratio l-flexEmbed-ratio--4by3"></div>
   <div class="l-flexEmbed-content">
     <img width="500" height="375" src="http://lorempixel.com/500/375/nature" alt="">
   </div>
 </div>
</div>