css - Stretching iframes to fit a width while maintaining height-width aspect ratio (tumblr theme)

Question

I'm running into a problem with tumblr cutom theme creator. When adding, for example, a video post, they put it into an iframe with a set width and height. I can reset with width of the iframe and the video will stretch accordingly, but the height stay the same (as expected).

But when I set the height to auto, it squishes into a small rectangle, instead of assuming its normal width-height ratio (as I thought it would). Is there a way to make the iframe keep the ratio set for it in the iframe, but scale it up/down with CSS? JQuery is okay too, but CSS is preferred.

HTML

<div class="video">
    {VideoEmbed} // tumblr replaces this with an iframe containing the video
</div>

CSS (not working)

.video iframe {
    height: auto // not working (as in, not producing desired effect)
    width: 700px // working
}