A SASS mixin to dynamically create intrinsic ratios for responsive embedded content. For more info visit http://alistapart.com/article/creating-intrinsic-ratios-for-video

index.html

<!-- The `data-ratio` attribute contains the width and height of the image -->
 
<div data-ratio="560-300" class="responsive-wrapper">
  <img src="http://placehold.it/560x300" class="fill-container"/>
</div>
 
<div data-ratio="420-315" class="responsive-wrapper">
  <iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0" allowfullscreen class="fill-container"></iframe>
</div>

styles.scss

// The SASS mixin takes two variable that match the content dimensions
@mixin intrinsic-ratio( $width, $height ) {
 
  // Dynamic class names using interpolation in Sass 3.3
  &[data-ratio="#{$width}-#{$height}"] {
    padding-bottom: percentage($height / $width);
    position: relative;
    height: 0;
  }
}
 
// A generic class to allow a child to completely fill a parent
.fill-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
// Calling the mixins couldn't be simpler
// You need one for each size object you have
.responsive-wrapper {
 
  // The variables are the height and width of the content
  @include intrinsic-ratio(560,300);
  @include intrinsic-ratio(420,315);
 
}