I've been looking through the Fancybox API and I'm not sure what to change in order to have the fancybox resize nicely with the PDF inside it. Right now when the window is resized the fancybox bleeds off the right side of the page.

Heres when it first opens: http://lizbmorrison.net/fancybox1.png
and when the window is resized: http://lizbmorrison.net/fancybox2.png

HTML:
Code:
<li class="pdf"><a class="fancypdf" href="#mydoc">View PDF</a></li>
<div id="mydoc" style="display:none;">
	<embed class="embed" src="<?php echo wp_get_attachment_url( $PDF->ID ); ?>"></embed>
</div>
JS:
Code:
$(document).ready(function() {
	var width = $(window).width() * 0.9;
	var height = $(window).height() * 0.9;
	$('.embed').css('width', width).css('height', height);
	$('a.fancypdf').fancybox({
		'type': 'inline',
		'margin': 0,
		'centerOnScroll': false,
		'hideOnContentClick': false,
		'autoDimensions': true,
		'autoScale': true,
		'transitionIn': 'fade',
		'transitionOut': 'fade',
	});
});
$(window).resize(function () {
	var width = $(window).width() * 0.9;
	var height = $(window).height() * 0.9;
	$('.embed').css('width', width).css('height', height);
});
Any ideas?