How do I embed a swf with 100% width and height using swfObject and spark?

Question

I use swfObject and embed my object using 100% for the width and height values. The width and height in my outer div is set to 500.

Yet my swf only takes up 100% of the width, not the height.

html/javascript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">
var currentVid;

$(document).ready(function(){
    //This parameter will name the file
    callRecorder("test001");
});




function callRecorder(x){
    currentVid = x;
    var flashvars = {};
    flashvars.fileName=x;
    var parameters = {};
    var attributes = {};
    attributes.name="vidRecorder";
    attributes.id="vidRecorder";

    swfobject.embedSWF("recorder.swf?ID="+Math.random()*100,"vidRecorderDIV","100%","100%","11.2", "expressInstall.swf", flashvars, parameters, attributes);    
}


</script>

Actionscript/spark

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="100%" height="100%" creationComplete="getService()" skinClass="mySkin" frameRate="60" >

///

stage.scaleMode = StageScaleMode.EXACT_FIT;

Answer 1

This is a common issue when embedding SWFs. To make a SWF fill an HTML element 100% height, ensure the parent container has a height explicitly declared in the CSS:

/* the parent of the vidRecorderDIV. I don't 
   know what the name is so I guessed 
   vidRecorderDIVparent. Replace with the 
   selector of the true parent element */

#vidRecorderDIVparent { 
  height: 500px;
  margin: 0;
  padding: 0;
}

#vidRecorderDIV {
  height: 100%;
}

If your SWF is the only thing on the page, make sure body and html have height set to 100%, no padding or margins:

html {
  height: 100%;
  overflow: hidden; /* Hides scrollbar in IE */
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#vidRecorderDIV {
  height: 100%;
}

You can see a functioning example at http://learnswfobject.com/advanced-topics/100-width-and-height-in-browser/

Also, note that swfobject.embedSWF already executes on domready, so it's not necessary to wrap in the jQuery $(document).ready function (doesn't hurt to leave the jQuery, either).