How do I make my webplayer fill the entire browser window?

I have seen couple unity web player projects that use the full screen - that is the full size of the current browser page, How is it done?

If you take a look at the default HTML file generated when building a webplayer, you'll notice that the size of the webplayer is specified there in "width" and "height" HTML properties.

Replacing these specific dimensions with "100%" will scale your web player to the full size of the browser window.

Remember to save your modified HTML file in a different location than where you're building new webplayers to or at least rename it. Otherwise new rebuilds of the webplayer will overwrite your changes.

Also notice that most browsers have a default margin set which will result in a white frame around your content if you set it to 100%, 100%. To remove that, you'll need to add a bit of CSS to the `` section of your HTML:

<style type="text/css" media=screen>
   body
   {
      margin: 0px;
      padding: 0px;
   }
</style>

I believe you're talking about using the full browser window instead of full screen. The way to do this is by using javascript in the webpage to determine your browser window size and then dynamically generate the plugin code with the width and height properties of the plugin code set to the calculated window width/height.

Please check out the source of Mars Explorer's play page - it achieves cross browser full viewport viewing, a beautiful plugin installation, super cool loading graphics (requires Pro), etc.

http://dat.marsxplr.com/play

This method doesn't work with Unity 3.x any more. Anyone know how to do it in Unity 3.x?

A way that I know works is to use [WebTemplates][1] - this will allow you to create a custom template that you can choose when you select your Player Settings. Here is the code to a file called “index.html” - you’ll want to put this in your project under Assets>WebPlayerTemplates>FullWindowTemplate (create the directories). Here is the code (HTML):

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>%UNITY_WEB_NAME%</title>
        %UNITY_UNITYOBJECT_DEPENDENCIES%
        <script type="text/javascript">
        <!--
        var unityObjectUrl = "%UNITY_UNITYOBJECT_URL%";
        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 unityPlayerObject;
            jQuery(function() {
                var config = {
                    width: %UNITY_WIDTH%, 
                    height: %UNITY_HEIGHT%,
                    params: %UNITY_PLAYER_PARAMS%
                };
				config.params["disableContextMenu"] = true;
                var u = new UnityObject2(config);

                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], "%UNITY_WEB_PATH%");
				unityPlayerObject = u;
				ResizeUnity();
            });
  		function ResizeUnity()
		{
			GetWindowSize();
			
			var unity = unityPlayerObject.getUnity();
			if(unity != null)
			{					
				unity.style.width = winWidth + "px";
				unity.style.height = winHeight + "px";
			}
		}
		var minWidth = %UNITY_WIDTH%, minHeight = %UNITY_HEIGHT%;
		var winWidth, winHeight;
		function GetWindowSize()
		{
			if(typeof(window.innerWidth) == 'number')
			{
				///Non-IE or IE 8+
				winWidth = window.innerWidth;
				winHeight = window.innerHeight;
			} 
			else
			{
				if(document.documentElement && 
					(document.documentElement.clientWidth || document.documentElement.clientHeight))
				{
					//IE 6+ in "Standards Compliant Mode"
					winWidth = document.documentElement.clientWidth;
					winHeight = document.documentElement.clientHeight;
				} 
				else
				{
					if(document.body && (document.body.clientWidth || document.body.clientHeight))
					{
						//IE 4 compatible
						winWidth = document.body.clientWidth;
						myHeight = document.body.clientHeight;
					}
				}
			}
					
			winWidth = Math.round(winWidth);
			winHeight = Math.round(winHeight);
			
			if(winWidth < minWidth)
				winWidth = minWidth;
			if(winHeight < minHeight)
				winHeight = minHeight;
		}
        -->
        </script>
        <style type="text/css">
        <!--
		body {
			font-family: Helvetica, Verdana, Arial, sans-serif;
			background-color: white;
			color: black;
			text-align: center;
		}
		a:link, a:visited {
			color: #000;
		}
		a:active, a:hover {
			color: #666;
		}
		p.header {
			font-size: small;
		}
		p.header span {
			font-weight: bold;
		}
		p.footer {
			font-size: x-small;
		}
		div.content {
			 position:absolute;
			 left:0px;
			 top:0px;
		}
		div.broken,
		div.missing {
			margin: auto;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 193px;
			margin-top: -32px;
			margin-left: -97px;
		}
		div.broken a,
		div.missing a {
			height: 63px;
			position: relative;
			top: -31px;
		}
		div.broken img,
		div.missing img {
			border-width: 0px;
		}
		div.broken {
			display: none;
		}
		div#unityPlayer {
			cursor: default;
			height: 100%;
			width: 100%;
		}
		-->
        </style>
    </head>
	<body scroll="no" 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 class="broken">
                    <a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
                        <img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

Once this is in the appropriate directory in your project, you will have a new option for player settings. When you generate the web build, you will see an additional file called “index.html” file in the folder with the usual two files (xxxx.html and xxxx.unity3d). If you point your browser at the xxxx.html file and open it, the unity player will open to the extents of the browser window. One thing to keep in mind is that you want to set your player resolution to something small - like 640x480 so that you won’t get scroll bars on smaller windows.
[1]: http://docs.unity3d.com/Manual/UsingWebPlayertemplates.html

Just found this awesome and simple guide :

It’s step by step and easy to follow.

Here is the HTML that’ll do it.

For me it works perfectly on at least Chrome and Firefox.

IE works too but doesnt resize height when you dynamically stretch the window during gameplay (needs refresh).

credit to: Webplayer 100% Width & Height « Unity Coding – Unity3D and me (i fixed dynamic stretching and crossbrowser compatibility) :slight_smile:

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Unity Web Player | YOUR_GAME</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 ua = window.navigator.userAgent;
			var msie = ua.indexOf("MSIE ");
			var config = {
				params: { enableDebugging:"0" }
			};
			if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
				config = {
					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], "YOUR_GAME.unity3d");
			});
		-->
		</script>
		<style type="text/css">
		<!--
		body {
			font-family: Helvetica, Verdana, Arial, sans-serif;
			background-color: white;
			color: black;
			text-align: center;
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
		}
		a:link, a:visited {
			color: #000;
		}
		a:active, a:hover {
			color: #666;
		}
		p.header {
			font-size: small;
		}
		p.header span {
			font-weight: bold;
		}
		p.footer {
			font-size: x-small;
		}
		div.content {
			margin: auto;
			width: 100%;
			height:100%;
		}
		div.broken,
		div.missing {
			margin: auto;
			position: relative;
			top: 50%;
			width: 193px;
		}
		div.broken a,
		div.missing a {
			height: 63px;
			position: relative;
			top: -31px;
		}
		div.broken img,
		div.missing img {
			border-width: 0px;
		}
		div.broken {
			display: none;
		}
		div#unityPlayer {
			cursor: default;
			height: 100%;
			width: 100%;
		}
		embed
		{
			width: 100%;
			height: 100%;
		}
		html
		{
			width: 100%;
			height: 100%;
		}
		-->
		</style>
	</head>
	<body>
		<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 class="broken">
					<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
						<img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
					</a>
				</div>
			</div>
		</div>
	</body>
</html>
  1. remove the line

     <p class="header"><span>Unity Web Player | </span>whatevername</p>
    
  2. in css body add

         overflow: hidden;
    
  3. replace

    var config =
    width: xxx,
    height: xxx,

with

	var sw = document.documentElement.clientWidth-20;
	var sh = document.documentElement.clientHeight-20;
		var config = {
			width: sw, 
			height: sh,
  1. and last in css sections:
    div.content and div#unityPlayer
    replace all with 100%

     	height: 100%;
     	width: 100%;