[CSS] Elastic object

When you apply this css to img:

img {
    max-width: 100%;
    height: auto;
}

then it'll constrain it's proportion and will gracefully resize but what about other tags e.g. video or textarea? height: auto; won't work for other objects than img but there's a nice method to achieve similiar effect:

HTML:

<div>
    <textarea name=""></textarea>
</div>

CSS:

/* figure */.elastic-object {
    height: 0;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* = 9 * 100/16 = 16:9 */
}

.elastic-object > * {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

Demo: http://jsfiddle.net/tzaCD/

This is based on this great article