jQuery: Width and height not changed in FireFox 3.0.1

Question

I am currently using the jQuery user interface to resize a DIV and to also resize the YouTube video that rests inside the DIV.

http://jimenglandweb.com/projects/jquery/instancecontainer.html

When the containing DIV is resized, the YouTube video should follow suit:

 $("#instanceContent").resizable({
  maxWidth: 425, maxHeight: 344,
  minWidth: 213,  minHeight: 173,

  resize: function(e, ui) {
   $("#youtubes").width(ui.size.width-5);
   $("#youtubes").height(ui.size.height-5);
  }
 });

This works fine in Google Chrome but has issues in FireFox. The problem lies with .width and .height. Does anyone know 1) why this is not working and 2) if there is a solution?

Answer 1

Try this:

$("#instanceContent").resizable({
    maxWidth: 425,  maxHeight: 344,
    minWidth: 213,  minHeight: 173,

    resize: function(e, ui) {
        $("#youtubes").css({
            width : (ui.size.width - 5),
            height : (ui.size.height - 5)
        });
    }
 });

Answer 2

Ropstah, thanks thanks thanks!