Aspect ratio padding for iframe videos

[mdt2]

We copy/paste this code from project to project, it would be nice to have here! The 56.25% creates the 16:9 aspect ratio.

.video {
  // Creates a container with at 16:9 aspect ratio
  height: 0 !important;
  padding-bottom: 56.25% !important;
  position: relative;
  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

[zastrow]

I like the idea of creating a mixin to accomplish this. There is already a ratio percent function in Sparkle, but I think a mixin that accomplishes this would be versatile to fit a custom class.

What would be best for this is if we can pass in ratio percentage, but default to the widescreen 56.25% value. Then the iframe should be customizeable/expandable as well.

For usage this is what I think this is what this should look like:

.my_video {
 @include ratio-block( ratio(4, 3), '.iframe')
}

I’m open to discussing the name of this function. The ratio(4, 3) is in number value, so it can use percentages or calc(), or the ratio() function. The second portion of the mixing '.iframe' would allow for passing in a string of selectors, because we may want iframe and video and some other class value.