Is there a way to make a flash game go full screen along with its container div? I have a button that expands the div to full screen, but the flash game inside remains stuck in the top left corner of the screen. How can I ensure that the flash game expands with the div and fills the entire screen?
I have experimented with using object-fit contain and cover in the .ob section of my CSS.
Here is the structure of my 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>
To enable full screen mode, I use this 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>
The full screen button looks like this:
<button onclick="goFullscreen('gamebox'); return false">Fullscreen Mode</button>
My gamebox has the following CSS styling:
#gamebox {
display: table;
margin: 0 auto;
}
Unfortunately, when the div goes full screen, the game remains stuck in the top left corner without filling the entire screen. The goal was to achieve a full screen experience, but currently it's limited to just the top left corner of the screen. The full screen functionality works on the div itself, but not on the embedded object.