# Embed with widh relative to height

**URL:** <https://forum.kirupa.com/t/embed-with-widh-relative-to-height/306309>\
**Category:** Uncategorized\
**Created:** [March 12, 2010, 6:46pm UTC](https://forum.kirupa.com/t/embed-with-widh-relative-to-height/306309 "2010-03-12T18:46:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![chopficaro](https://avatars.discourse-cdn.com/v4/letter/c/5f9b8f/32.png) [@chopficaro](https://forum.kirupa.com/u/chopficaro)\
**Post date:** [March 12, 2010, 6:46pm UTC](https://forum.kirupa.com/t/embed-with-widh-relative-to-height/306309/1 "2010-03-12T18:46:50Z")

</div>

ive been able to embed my swf as an html object with its height and width relative to the window size, which was step one. now, i want to preserve the aspect ratio, so that the height is always relative to the width. i know this isnt a javascript or html forum but i figured someone here must have wanted to try this at some point. heres what i tried that didnt work:

javascript

```auto
window.onresize = function()
{
document.getelementById("containerA").style.width=document.getelementById("containerA").style.height/20+'px';
}

```

html

```auto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    html, body, #containerA { width:100%; height:100%; }
    body { margin:0; padding:0; overflow:hidden;}
    </style>

    <style type="text/javascript" src="resize.js"></style>

  </head>
  <body>
    <div id="containerA">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
        <param name="movie" value="yankeeScreenMenu.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="yankeeScreenMenu.swf" width="100%" height="100%">
    <param name="quality" value="autohigh" />
    <param name="menu" value="false" /> 
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

```
