• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
Question by Xin · Dec 09, 2009 at 01:24 AM · webplayerbrowserfullscreen

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?

Comment
AngryAnt
runevision
davebuchhofer
jashan
SteveFSP
ikelaiah
niczx10r

People who like this

7 Show 0
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

8 Replies

  • Sort: 
avatar image

Answer by AngryAnt · Dec 09, 2009 at 01:31 PM

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 <head></head> section of your HTML:

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

Comment
burnumd
runevision
davebuchhofer
jashan
SteveFSP
ikelaiah
APProjects
The-Oddler
rakkarage
niczx10r

People who like this

10 Show 4 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Xin · Dec 10, 2009 at 12:53 AM 0
Share

the Margin tip is really great, thanks

avatar image davebuchhofer · Dec 10, 2009 at 02:36 PM 0
Share

For the html challenged, where would you place the CSS code? in one of the document.writes?

avatar image davebuchhofer · Dec 10, 2009 at 02:41 PM 0
Share

to answer myself, yes, placing it in the document.write() block just under the if (hasUnity) does work

avatar image AngryAnt · Dec 11, 2009 at 10:12 AM 0
Share

You don't need to place the style script within any of the JS code - just place it somewhere between the and tags.

avatar image

Answer by Jaap Kreijkamp · Dec 09, 2009 at 02:04 AM

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.

Comment

People who like this

0 Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Xin · Dec 09, 2009 at 10:38 AM 0
Share

Thanks Jaap. is there a example code to lookat? is where should I look in the Doc?

avatar image

Answer by Aubrey-Falconer · Dec 11, 2009 at 04:54 PM

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

Comment

People who like this

0 Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image grimmy · Nov 02, 2011 at 07:03 AM 0
Share

I'm looking at a way to do the same rescaling of the Unity webplayer without needing to reload the game every time. I see Mars Explorer does this really well but there don't seem to be any clues in the web page source code. Are you doing some browser>Unity communication for this?

edit: I actually embedded your full source code (including your unity3d file) to my test page but when I resized the browser window, the webplayer still reloads. I don't understand this as there is no difference between our Unity builds OR our Javascript on the server. Any ideas what this could be?

avatar image grimmy · Nov 02, 2011 at 08:14 AM 0
Share

SOLVED-I was calling the GetUnity() function twice in one of my included files. As soon as I removed the second call the page refreshes the webplayer's scale automatically.

avatar image

Answer by bigkahuna · Dec 11, 2010 at 10:50 AM

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

Comment

People who like this

0 Show 0 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image

Answer by jwilliamsen · Jun 13, 2014 at 12:46 AM

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

Comment

People who like this

0 Show 0 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
  • 1
  • 2
  • ›

Unity Answers is in Read-Only mode

Unity Answers content will be migrated to a new Community platform and we are aiming to launch a public beta by June 9. Please note, Unity Answers is now in read-only so we can prepare for the final data migration.

For more information and updates, please read our full announcement thread in the Unity Forum.

Follow this Question

Answers Answers and Comments

4 People are following this question.

avatar image avatar image avatar image avatar image

Related Questions

Loading Unity3d web player as a separate Pop-up window 1 Answer

Why can't I build Web Player in Unity while I have no problems with building standalone versions? 2 Answers

unityplayer problem on mac 2 Answers

Concerns about browser security due to making javascript calls to game from browser. 1 Answer

Web player : fullscreen : ready for primetime? 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges