Responsive sized swfobject?

Question

I have embedded this interactive poster ( http://www.mikesmithdesign.co.uk/images/posterforscreen.swf ) into an html page but am having trouble setting the size of it. I am working with bootstrap and want the content to be responsive but at the moment it comes up really small sits in the middle of the column and I cannot seem to get it to fill the entire width.I have tried setting widths and heights to 100% or using the class "img-responsive" with it but nothing seems to work. Here is my code from the head:

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <script type="text/javascript" src="swfobject.js"></script>
      <script type="text/javascript">
         swfobject.registerObject("myFlashContent", "9.0.0");
      </script>

And code from the body (ignore the unclosed div tag as this is just a snippet of the code not the whole thing)

<div class="col-md-8 col-md-offset-1 visible-md visible-lg" id="mainContent">
  <img src="images/typesketch.jpg" alt="Typographic Development Sketches" class="img-responsive propersize" />
  <br />
  <br />
  <div>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="myFlashContent">
      <param name="movie" value="posterforscreen.swf">
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="posterforscreen.swf" class="propersize">
        <!--<![endif]-->
        <a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
        <!-- [if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>

Please forgive any messy code or bad practice, my background is in design for print and all this web stuff is a bit new to me.

Answer 1

To fix the height of your flash object, you can use the height of your images according to the size of the page, which gives us :

CSS code :

<style>

    @media (min-width: 1200px) {
        .flash_container {
            height: 499px;
        }
    }

    /* Landscape tablets and medium desktops */
    @media (min-width: 992px) and (max-width: 1199px) {
        .flash_container {
            height: 410px;
        }
    }

    /* we don't need all these presets 
       because you are showing an image 
       instead of the flash object 
    */

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {}

    /* Landscape phones and portrait tablets */
    @media (max-width: 767px) {}

    /* Portrait phones and smaller */
    @media (max-width: 480px) {}

</style>

HTML code :

<div class="img-responsive propersize flash_container">  
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="myFlashContent" width="100%" height="100%">
        <param name="movie" value="posterforscreen.swf">
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="posterforscreen.swf" width="100%" height="100%">
        <!--<![endif]-->
        <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a>
        <!-- [if !IE]>-->
        </object>
        <!--<![endif]-->
    </object>
</div>

Hope that can help.