jquery resize parent child

I have a div container with class embed and unique id. Inside the container div i have an embeded player code using either iframe or object. Ex:

<div class="embed" id"id21" style="width:480px; height:390px;">
<iframe width="480" height="390" src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

When i resize the div container, i want the player inside it to resize as well. the embed code have the attributes of width and height. I did the following but unable to get it to work. I need to reference the container by it's id, so if i have another container with a different id, resizing should only take effect on the container being resized and non of the other containers.

$('.embed').live({
    resize: function(event, ui) {
        var id = this.id;
        var height = $(id).height();
        v开发者_运维知识库ar width = $(id).width();
        $(id).contents().attr({'width':width,'height':height});
    }
});

$('.embed').live({
    resize: function(event, ui) {
        $(this).find("iframe").css(ui.size);
    }
});

Doesn´t this work?

If you use CSS to control the height and width of the iframe in relative dimensions, say % then resizing the div will automatically resize the iframe:

iframe {
    height: 80%;
    width: 100%;
    margin: 0 auto;
}

This will only work if .embed has, as in your example, defined dimensions.

Edited to amend html, css and provide demo jQuery:

html:

<div class="embed" id="id21" style="width:480px; height:390px;">
    <iframe src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

css

.embed {
    border: 5px solid #000;
    padding: 1em;
}

.embed:hover {
    border-color: #f90;
}

iframe {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

jQuery:

$('.embed').resizable(
    {
        aspectRatio: 1.23,
        minHeight: 390,
        minWidth: 480
     });

JS Fiddle demo.

Try this:

$('.embed').live({
    resize: function(event, ui) {
        $(this).children()
            .width( $(this).width() )
            .height( $(this).height() );
    }
});