Responsive edge animate oam in fluid grid

Question

Hi, maybe my question is totally rookie one, but I cannot get the responsive Edge Animate package to do resize smoothly in the fuid grid of Dreamweaver.
Either it is not wide enough or the height does not scale, which results in the footer to be far down.
It probably has to do with the fixed size of the object tag when I insert the oam.
<object id="EdgeID" type="text/html" width="960" height="510"  ....
Changing sizes to 100% works fine for width only, the height behaves strange, showing only a small part of the animation in every view.
Is this an issue of oam packages or just my poor knowledge of CSS ?
Attached you find the screenshots:
Thanks a lot for your help!
B.

Answer 1

I came across this problem when recording Adobe Dreamweaver CC: Learn by Video for Adobe Press. The way I handled it was by adding the following block of JavaScript just before the closing </body> tag on the page that contains the Edge Animate object:
<script>
function fixHeight() {
  var anim = document.getElementById('EdgeID'),
       w = anim.offsetWidth;
  anim.style.height = (w * .562) + 'px';
fixHeight();
window.addEventListener('resize', fixHeight, false);
</script>
This gets the width of the animation (the default ID is EdgeID). It then adjusts the height by multiplying the width by 0.562. You will need to fix the scaling ratio in the following line to suit the proportions of your animation:
anim.style.height = (w * .562) + 'px';
I can't remember all the details because it's more than a year ago that I did this. As I recall, Edge Animate generates the correct height for the animation, but it doesn't adjust the height of the <object> element used to display it.