title: Code to Display Responsive HTML5 Animated Banner With Flash Fallback
body: <p>HI and thanks for reading my first post. </p>
  
  <p>I am a web developer in the UK and want to find a solution to display elements across a web page in a dynamic and responsive fashion.</p>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>1) Html5 does not work properly in earlier versions of Internet Explorer.</p>
  
  <p>2) Flash does not work on all devices (due to <em>web compliance</em> restrictions - Thanks Apple! lol)</p>
  
  <p>3) Responsive templates and elements are a necessity for different screen sizes.</p>
  
  <p><strong>OBJECTIVE</strong></p>
  
  <p>A) I want to achieve the same movie/banner built in HTML5 and Flash so that if the banner does not display correctly, it will fall back to a flash alternative (or the other way round - I would be interested to hear which is best in your opinion). </p>
  
  <p>B) The banner needs to be responsive in both Html5 (as in adobe animate) and Flash (as in the flash output of Adobe Flash Pro CS6) </p>
  
  <p>C) The banner needs to be able to be embedded in a page and display with the correct aspect ratio so the elements are displayed correctly - ie: the size of the animation elements and the position of those elements needs to be scaled as the screen size is changed.</p>
  
  <p><strong>SOLUTION (So Far!)</strong></p>
  
  <p>So far I have got to the stage of being able to produce the same animation in flash and html 5 using javascript, so that isn't a problem. </p>
  
  <p>I thought to embed the banner as an iFrame - but then thought a chromeframe with a self install option for IE 9,8,7 etc would be better. </p>
  
  <p>Then the iframe has to display the banner with a fallback to flash. so the code:</p>
  
  <pre><code>&lt;div class="banner"&gt;
    &lt;div class="embed-container"&gt;
      &lt;iframe src="http://mywebadress.com/banner.html" frameborder="0" seamless&gt;
        &lt;!--[if !IE]&gt;--&gt;
        &lt;object data="http://mywebadress.com/banner.swf" 
        type="application/x-shockwave-flash" width="100%"&gt;
          &lt;param name=allowscriptaccess VALUE="always"&gt;
          &lt;param name="quality" value="high" /&gt;
          &lt;param name="wmode" value="transparent" /&gt;
        &lt;!--&lt;![endif]--&gt;
      &lt;/iframe&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The animation is on a page <a href="http://mywebadress.com/banner.html" rel="nofollow">http://mywebadress.com/banner.html</a> and is using javascript to tween the animation. The frameborder=0 and seamless gets rid of the scroll bar, and all aditional properties are set by the CSS:</p>
  
  <pre><code>.banner {
      width: 90%;
      margin: 0px auto;
  }
  
  .embed-container {
      height: 0;
      width: 100%;
      padding-bottom: 56.25%;
      overflow: hidden;
      position: relative;
  }   
  
  .embed-container iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  </code></pre>
  
  <p>The most important thing to note is the padding-bottom: 56.25%; this will give the container its aspect ratio.
  This is calculated as 9/16 = 0.5625 (for youtube for example) meaning that the height of the container is 56.25% the size of the width.</p>
  
  <p>However I have only managed to get one example of the code working and I am unsure of what went wrong in future instances. </p>
  
  <p>Any thoughts of development of this code would be great - I would live to hear your opinions on where I have gone wrong, or revisions and improvements!</p>
  
  <p>Thanks :)</p>