I can't get the Unity web player to resize at runtime

Unity Engine
1

I’m trying to make a web game that fills the user’s browser window, and updates if the user re-sizes the browser window, like this:

http://dat.marsxplr.com/play

This is the HTML that I’m using:

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Game Title</title>
		<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
		<script type="text/javascript">
		<!--
		var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
		if (document.location.protocol == 'https:')
			unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
		document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
		-->
		</script>
		<script type="text/javascript">
		<!--
			var config = {
				width: window.innerWidth, 
				height: window.innerHeight,
				params: { enableDebugging:"0" }
				
			};
			var u = new UnityObject2(config);
			
			jQuery(function() {

				var $missingScreen = jQuery("#unityPlayer").find(".missing");
				var $brokenScreen = jQuery("#unityPlayer").find(".broken");
				$missingScreen.hide();
				$brokenScreen.hide();

				u.observeProgress(function (progress) {
					switch(progress.pluginStatus) {
						case "broken":
							$brokenScreen.find("a").click(function (e) {
								e.stopPropagation();
								e.preventDefault();
								u.installPlugin();
								return false;
							});
							$brokenScreen.show();
						break;
						case "missing":
							$missingScreen.find("a").click(function (e) {
								e.stopPropagation();
								e.preventDefault();
								u.installPlugin();
								return false;
							});
							$missingScreen.show();
						break;
						case "installed":
							$missingScreen.remove();
						break;
						case "first":
						break;
					}
				});
				u.initPlugin(jQuery("#unityPlayer")[0], "BoobieClicker.unity3d");
			});
			
		    function GetUnity ()
		    {
				var unity = document.getElementById("UnityObject");
				if(unity == null) {
				unity = document.getElementById("UnityEmbed");
				}
				return unity;
		    }
			
    		function resizeUnity()
		    {
		        var minW = 990;
		        var w;
		        if(document.all)
		        {
		           w = document.body.offsetWidth;
		        }
		        else
		        {
		           w = window.innerWidth;
		        }          
		                   
	            if(w < minW)
	            w = minW;
	                   
	            var unity = GetUnity();
	            unity.style.width = w;
		    }

		-->
		</script>
		
		<style type="text/css">
		<!--
		body {
			margin: 0px;
			padding: 0px;
		}
		div#unityPlayer {
			cursor: default;
			height: 100%;
			width: 100%;
		}
		-->
		</style>
	</head>
	<body onLoad="resizeUnity()" onResize="resizeUnity()">
		<div class="content">
			<div id="unityPlayer">
				<div class="missing">
					<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
						<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
					</a>
				</div>
			</div>
		</div>
	</body>
</html>

The tag is supposed to call resizeUnity() whenever the window is re-sized, but it doesn’t seem to be working.

I’ve tested in Firefox and Chrome.

What am I doing wrong? :frowning:

2

You can just have a look and use my template:

http://virtualplayground.d2.pl/Unity/layouts/

3

Thanks Tomekkie the 2nd