Issue with overflow:hidden with PDFs and JQuery UI Dialog

Not really sure what is going on here however when you add a PDF object to a container div that is within a

by dwaddell

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css">
<!-- This example is not complete -->

<div id='container'>
    <div id='pdf1'>PDF1</div>
    <div id='pdf2'>PDF2</div>  
</div>

CSS

#container
{
    overflow:hidden;
}

#container,#pdf1,#pdf2
{
    height:300px;
    width:300px;
}

JavaScript

$('div#pdf1').html('<object height="100%" width="100%" type="application/pdf" data="dl.dropbox.com/u/5126043/iPad%20intro.pdf"></object>');

$(window).queue('thisQueue', function(next) {
    next();
});

$(window).delay(10000, 'thisQueue');

$(window).queue('thisQueue', function(next) {
    $('div#pdf2').html('<object height="100%" width="100%" type="application/pdf"  data="http://dl.dropbox.com/u/5126043/iPad%20intro.pdf"></object>');
    next();
});

$(window).dequeue('thisQueue');



/*var $Dialog_div;
$Dialog_div = $('<div id=\'ThisDialog\'>Hello</div>').prependTo('body');
$Dialog_div = $('#ThisDialog').dialog({
    autoOpen: true,
    draggable: true,
    resizable: true,
    title: 'Dialog',
    modal: true,
    stack: true,
    height: ($(window).height() * 0.95),
    width: ($(window).width() * 0.9),
    
    open: function ()
    {
              
    },
    
    buttons: {
        'OK': function() {
            $Dialog_div.dialog('close');
        }
    }
});*/