title: When I full screen a div how do I ensure that the object in it goes full screen as well?
body: <p>I am trying to full screen a flash game and I have made a button that makes a container div full screen. However the flash game inside the div does not go full screen with the div, instead it fills the top left corner of the screen. How can I make the flash game follow the div as it expands to full screen mode?</p>
  
  <p>I have tried using object-fit contain and cover in the .ob part of my CSS.</p>
  
  <p>I have a div:</p>
  
  <pre><code>        &lt;div id="gamebox"&gt;
              &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  
  
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab    #version=5,0,0,0" &gt;
              &lt;param name=movie value="adrenaline.swf"&gt;
              &lt;param name=quality value=high&gt;
              &lt;param name="menu" value="false"&gt;
              &lt;embed src="Flash/adrenaline.swf" quality=high menu="false" 
                  pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?    P1_Prod_Version=ShockwaveFlash" 
              type="application/x-shockwave-flash" width="550"     height="400"&gt; &lt;/embed&gt;&lt;/object&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>which becomes full screen with the following code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        function goFullscreen(id) {
          var element = document.getElementById(id);
          if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
          } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
          }
        }
      &lt;/script&gt;
  </code></pre>
  
  <p>With the following button:</p>
  
  <pre><code> &lt;button onclick="goFullscreen('gamebox'); return false"&gt;Fullscreen     Mode&lt;/button&gt;
  </code></pre>
  
  <p>My gamebox has the following CSS:</p>
  
  <pre><code>#gamebox {
      display: table;
      margin: 0 auto;
      }
  </code></pre>
  
  <p>However when I full screen the div the game itself only takes up the top left corner and does not fill the screen with the div.</p>
  
  <p>I am of course expecting a full screen experience but instead I only have the top left corner of the screen to play with. The full screen function is working but only on the div and not the object.</p>