0

I really need some help with embedding a swiffy animation into a responsive bootstrap html page. I've tried 1. embedding within iframes in a multitude of ways, 2. placing the actual html code within my page and 3. exporting from flash to .mov then converting to .mp4 and using video tags (where i am now) but i'm totally stuck with how to pull a swiffy html converted banner in and make it responsive.

All I want is for my html banner to view in a similar way to the way someone would expect a responsive header image to view.

  1. I'd like it to respond down to mobile size.
  2. When it reaches a max height of 400px i'd like it to centre in the outer containing div as the browser width is expanded.

Can anyone assist? There's a few useful posts out there where I've found ppl advising to use width:100% on the id for the swiffy container, however, i'm not seeing how the actual banner is being pulled in, in the html.

Can anyone help?

Thanks

G

Goardo
  • 49
  • 12

2 Answers2

1

Thanks for your assistance, though it is now solved. This is how:

HTML IS:

<div class="wrapper">
    <div class="h_iframe">
        <img class="ratio" src="here i placed a blank image background"/>
        <iframe src="this was the link to my swiffy converted html banner" frameborder="0"></iframe>
    </div>
</div>

CSS is:

.wrapper         {width:100%; max-height:400px; margin:123px auto 0 auto; background:#ad0017}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

Within the html of the swiffy converted file:

<div id="swiffycontainer" style="width: 100%; height:100%; max-height:400px!important;">

RESULT: A responsive html5 swiffy converted banner that scales down to mobile. As you expand the browser width it scales to a maximum height of 400px and then physically centres within the browser width. My animation had a red background so i matched the Document background colour of the flash animation to that red, so everything was seamless.

Goardo
  • 49
  • 12
0

In the Swiffy output file, I make sure that I have width: 100%; height: auto; like so:

<div id="swiffycontainer" style="width: 100%; height: auto;">
</div>

Then it should size to fit your iframe container however you have it styled inside the bootstrap framework.

user3412124
  • 17
  • 4
  • I was trying to avoid using an iframe as they're not ideal for scaling responsively. Are you aware of a way of embedding this without using an iframe? – Goardo Nov 21 '15 at 19:30
  • You could paste the swiffy output into a div and style that with your max-height:400px media query, or you could use an object embed: " Error: Embedded data could not be displayed. " You could try this, too: "" – user3412124 Nov 23 '15 at 04:45