Webplayer 100% Width & Height

An article by mgear

18 Comments

unity_webplayer_100_percent_width_heigth

Making the webplayer 100% width & height:

Publish your project to webplayer (default template)

File / Build Settings
Select webplayer as platform
Click “Add current”, if you havent added your scene to the build list yet
Click “Player settings”
From panel “Resolution & presentation”, you can pick the template: “default”
Click “Build” (this publishes your project to webplayer format, give some target folder to it)

Modifying the webplayer html page

Open “WebPlayer.html” to some text editor, for example default windows Notepad or notepad++
You are now viewing the HTML source, find lines:
var config = {
width: 960,
height: 600,
Replace those numbers with:
var config = {
width: window.innerWidth,
height: window.innerHeight,
Go down a bit, find lines:
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
After line “text-align: center;”, add these lines:
margin:0px;
padding:0px;
width:100%;
height:100%;
Next find line:
div.content {
margin: auto;
width: 960px;
}
Modify that style to:
div.content {
margin: auto;
width: 100%;
height:100%;
}
Find this part:
div#unityPlayer {
cursor: default;
height: 600px;
width: 960px;
}
Modify it to:
div#unityPlayer {
cursor: default;
height: 100%;
width: 100%;
}
*NEW: Insert this style also, to override embed object width:
embed
{
width:100% !important;
}
Next we just remove the extra elements from the page, so that only the player is left
Find this line, and delete it:
Unity Web Player | v4d
Same here, remove this line:
« created with <a href=”http://unity3d.com/unity/” title=”Go to unity3d.com”>Unity</a> »
Save the html file and test it!

Tags: 100%, css, fullscreen, height, webplayer, width

About the Author:

.fi

18 Comments + Add Comment

Chris 25/05/2013 at 01:23

This is really cool. I’m going to attempt to make my website with Unity and this will help a lot. Thanks

Reply
Carsten 01/01/2014 at 21:40

Works!
Cool!

But after resizing the browserwindow you need to refresh / reload the website to get it fit again. Uncool.

I don’t understand why UnityTechnologies does not provide a permant working solution for this.

Many thanks anyway!

Reply
- mgear 01/01/2014 at 21:55
 
 seems to come from this, the embed object tag gets width in pixels, instead of 100%:
 <embed height=”100%” width=”1543″ src=”WebPlayer.unity3d”…
 
 *Can override it by adding style:
 embed
 {
 width:100% !important;
 }
 
 ** Tested it here, try to resize window:
 http://unitycoder.com/upload/demos/LudumDareShark1/
 
 Reply
 - TigraPolosatiy 14/03/2014 at 13:05
 
 Can you send me works html sample? My width is ok but height still depends on the page itself and changes only after updating
 
 Reply
 - Erbacher 03/04/2014 at 19:45
 
 Has anyone been able to get the height scaling correctly at the same time as the browser scales. I would really like to know if you could keep the UnityPlayer in the same aspect ration even when re-sizing the browser.
 
 Reply
 - Daniel4D 26/03/2015 at 20:18
 
 Hi mgear,
 first thank you very much for this post, it helped me a lot!
 Just to say that I had still problems with the height, it didn’t update resizing the browser window,
 so a quick search online I found this code:
 
 $(window).resize(function(){
 $(“embed”).height($( window ).height());
 });
 
 It can be added inside the javascript code, just before the end.
 
 I hope this can help!
 Daniele
 
 Reply
Pedro Aguayo 15/02/2014 at 02:42

MGEAR, the link you provide does not work to fill the entire browser after resizing. It keeps the proportions of the Unity player settings (width/height). So, at least on Firefox (Mac), it does not work o resize.

Reply
- Dave 18/04/2014 at 17:55
  
  The issue of the Unity Web Player Embed not scaling correctly on Firefox Mac OSX happens on every unity web player i have found – Surely there is a fix somewhere for it.
  
  The issue I find is that when the height of the unity embed is altered dynamically (after the page originally loaded) whether by altering the source code int he webpage or by scaling the window, the contents of the embeded player get offset vertically. If you move your cursor over the web player it will still act as if nothing has moved but visually everything will be offset.
  
  Is there a fix for this.
  
  Reply
red 25/02/2014 at 01:19

Awesome!! I just made my game in full screen.
Thanks a lot!

Reply
Mafuta 09/10/2014 at 00:44

Works great and even when dragging from laptop to secondary monitor! Thanks!

Reply
Carsten 14/10/2014 at 11:17

Works nice in Chrome and Firefox, but Internet Explorer does not adapt the horizontal size when changing the browser window size.

Reply
Phaax 09/12/2014 at 02:14

I made a unitypackage for this a while back that will add a template to choose in your project when it’s added… http://www.phaaxgames.com/unity-scripts/

Reply
tomekkie 13/12/2014 at 12:20

It would be great to include an onlide demo to this post.

I didn’t manage to download the Phaax’s template package.

I have tried to make the template basing on the above post, but couldn’t get it to scale the webplayer height properly on the browser window size change in FF which I use.
But the below one works for me:

http://virtualplayground.d2.pl/?p=367#unitypackage

Reply
Nic 21/02/2015 at 14:14

Cheers guy. This really makes it look a lot better.

Reply
Dmitry 18/04/2015 at 23:12

Thank you very VERY much!!! :)))

Reply
louis 13/09/2015 at 15:12

Awesome ! it works perfectly.

Reply
Benjamin Hallion 24/11/2015 at 14:02

if you want refresh when resizing the window:

var config = {
width: “100%”,
height: “100%”,
params: { enableDebugging:”0″ }

};
var u = new UnityObject2(config);

window.onresize = function(event)
{
$(“#unityPlayer”).css(“height”, window.innerHeight + “px”);
};

Reply
mgear 29/12/2016 at 23:11

for unity 5.6 webgl
https://forum.unity3d.com/threads/unity-5-6-download-adaptive-full-browser-window-template.448477/

Reply