Scale HTML5 embed swf to fit in div dimensions

Question

I have the following setup:

<div class="creative">
  <embed src="..." type="application/x-shockwave-flash" scale="showall" wmode="opaque" allowScriptAccess="always" flashvars="..."/>';
</div>

//==== CSS ====
.creative {
width = 325px;
height= 350px }

I would like the embed swf file to fit in this dimensions but scale does not do what i want. I also tried width=100% and height=100% but makes the swf file gets all the space and when there are letters coming outside the scene they are visible.

One idea is to resize it with javascript but do you have any suggestions on any property of the html5 embed to do this automatically?

Thanks in advance!

Answer 1

Finally did that with js, i used the following function to calculate the new dimensions based on the container i would like the embed element to be.

/* Calculates the new scaled dimensions
 * srcWidth:  Swf real width
 * srcHeight: Swf real height
 * maxWidth:  Container's width
 * maxHeight: Container's height
 */
function calculateAspectRatioFit (srcWidth, srcHeight, maxWidth, maxHeight) {
    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
    return { width: Math.round(srcWidth*ratio), height: Math.round(srcHeight*ratio) };
};