Mar
31
2013

Webplayer 100% Width & Height

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:
    <p><span>Unity Web Player | </span>v4d</p>
  • Same here, remove this line:
    <p>&laquo; created with <a href=”http://unity3d.com/unity/” title=”Go to unity3d.com”>Unity</a> &raquo;</p>
  • Save the html file and test it!

18 Comments + Add Comment

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

  • 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!

    • 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/

      • Can you send me works html sample? My width is ok but height still depends on the page itself and changes only after updating

        • 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.

      • 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

  • 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.

    • 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.

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

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

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

  • 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/

  • 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

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

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

  • Awesome ! it works perfectly.

  • 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”);
    };

Leave a comment to Nic

Connect

Twitter View LinkedIn profile Youtube Youtube Join Discord Twitch

UnityLauncherPro

Get UnityLauncherPRO and work faster with Unity Projects!
*free unity hub alternative

@unitycoder_com

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.