New MM

[mhulse]

/*
(media element width) / (media element height) = ratio
<div mm2>
    <!-- Default size, good for mobile viewing: -->
    <video width="300" height="169">...</video>
</div>
*/
[mm2],
.mm2 {
    height: 0;
    padding-top: 56.25%; /* 16:9 = (9 / 16 = .5625) x 100 */
    position: relative;
    overflow: hidden;
}
[mm2] > *,
.mm2 > * {
    border: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    position: absolute;
    top: 0;
    left: 0;
}
[mm2="theatre"],
.mm2.theatre { padding-top: 59.171597633136%; } /* 1.69:1 = (1 / 1.69 = .59171597633136) x 100 */
[mm2="slide"],
.mm2.slide { padding-bottom: 66.666666666667%; } /* 3:2 = (2 / 3 = .66666666666667) x 100 */
[mm2="tv"],
.mm2.tv { padding-bottom: 75%; } /* 4:3 = (3 / 4 = .75) x 100 */

http://aneventapart.com/news/post/laziness-in-the-time-of-responsive-design-by-ethan-marcotte-aea-video