Google Swiffy, and responsive design, height

Question

I'm testing out Swiffy, and plugging it into Zurb's Foundation responsive framework. It all works well. I also updated the CSS for the #swiffycontainer container to have a width of width: 100%;.

The content fits nicely into the grid, but the my only issue is that if the size isn't set explicitly, then on a smaller screen, then, I get this issue with the height being way way larger than the content, even with height set at 500px. This also results in the Swiffy container showing contents outside of the stage.

Any ideas as to why? Would it be with the SVG generated from Swiffy? Thanks!

Update: It seems that this is probably related to AS 2/3's stageScale property on the Stage. Would anybody happen to know of a happy medium between "showAll/SHOW_ALL", and "noBorder/NO_BORDER"? Where the stage still resizes but doesn't show a border around it?

Answer 1

I ended up solving this issue with a bit of CSS that ensures that the height is scaled proportionally to the width (what ever width it maybe due to the responsive grid). This keeps the flash/Swiffy container from creating the letterbox bars.

In the SWF: Keep the default (AS2):

Stage.scaleMode = "noScale";

In the CSS, created a wrapper on the Swiffy container:

.swiffy-wrap { 
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  float: left;
  height: 0;
}

On the Swiffy container

#swiffycontainer {
  width : 100% !important;
  height: 100% !important;
  position: absolute;
  left: 0;
}

Answer 2

just put in the html result of swiffy conversion width 100% be careful only width not height, height, like this

div id="swiffycontainer" style="width: 100%; height: 500px"

works for me