CODEWITHSUNDEEP
javascripthtmlcss
John Sonnino
John Sonnino

Reputation: 579

When I full screen a div how do I ensure that the object in it goes full screen as well?

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?

I have tried using object-fit contain and cover in the .ob part of my CSS.

I have a div:

        <div id="gamebox">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 


codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab    #version=5,0,0,0" >
            <param name=movie value="adrenaline.swf">
            <param name=quality value=high>
            <param name="menu" value="false">
            <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"> </embed></object>
        </div>

which becomes full screen with the following code:

<script type="text/javascript">
      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();
        }
      }
    </script>

With the following button:

 <button onclick="goFullscreen('gamebox'); return false">Fullscreen     Mode</button>

My gamebox has the following CSS:

#gamebox {
    display: table;
    margin: 0 auto;
    }

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.

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.

Upvotes: 1

Views: 318

Answers (2)

obscure
obscure

Reputation: 12891

You have to give the parent div, holding the swf content some initial dimensions e.g. the actual dimensions of your flash movie. Now inside the properties of the object and embed tags, set the width / height to 100%. This will make sure the swf is always scaled proportionally according to it's parent.

<div id="gamebox" style="width:550px;height:400px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  id="adrenaline" width="100%" height="100%">
  <param name="movie" value="adrenaline.swf">
  <param name="bgcolor" value="#000000">
  <param name="quality" value="high">
  <embed type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer"
   width="100%" height="100%"
   name="adrenaline" src="adrenaline.swf"
   bgcolor="#000000" quality="high"
  ></embed>
</object>
</div>
<button onclick="goFullscreen('gamebox'); return false">Fullscreen     Mode</button>

Flash offers an additional attribute that controls how the movie is scaled: scale. If it's not present the default "showall" is used wich maintains the aspect ratio of the movie. "exactfit" on the other hand would stretch to the entire container.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65808

Your script will have to adjust the hard-coded width and height attributes that you've got on your embed tag. You can do this with something like this:

let embed = document.querySelector("embed");
embed.height = "1vh";
embed.width = "1vw";

Upvotes: 0

Related Questions