{"id":1796,"date":"2013-03-31T16:55:18","date_gmt":"2013-03-31T13:55:18","guid":{"rendered":"http:\/\/unitycoder.com\/blog\/?p=1796"},"modified":"2014-01-01T22:00:30","modified_gmt":"2014-01-01T19:00:30","slug":"webplayer-100-width-height","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2013\/03\/31\/webplayer-100-width-height\/","title":{"rendered":"Webplayer 100% Width &#038; Height"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1798\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2013\/03\/31\/webplayer-100-width-height\/unity_webplayer_100_percent_width_heigth\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/03\/unity_webplayer_100_percent_width_heigth.jpg?fit=680%2C374&amp;ssl=1\" data-orig-size=\"680,374\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"unity_webplayer_100_percent_width_heigth\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/03\/unity_webplayer_100_percent_width_heigth.jpg?fit=680%2C374&amp;ssl=1\" class=\"alignnone size-full wp-image-1798\" alt=\"unity_webplayer_100_percent_width_heigth\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/03\/unity_webplayer_100_percent_width_heigth.jpg?resize=680%2C374\" width=\"680\" height=\"374\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/03\/unity_webplayer_100_percent_width_heigth.jpg?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/03\/unity_webplayer_100_percent_width_heigth.jpg?resize=300%2C165&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>Making the webplayer 100% width &amp; height:<\/p>\n<p><strong>Publish your project to webplayer (default template)<\/strong><\/p>\n<ul>\n<li>File \/ Build Settings<\/li>\n<li>Select webplayer as platform<\/li>\n<li>Click &#8220;Add current&#8221;, if you havent added your scene to the build list yet<\/li>\n<li>Click &#8220;Player settings&#8221;<\/li>\n<li>From panel &#8220;Resolution &amp; presentation&#8221;, you can pick the template: &#8220;default&#8221;<\/li>\n<li>Click &#8220;Build&#8221; (this publishes your project to webplayer format, give some target folder to it)<\/li>\n<\/ul>\n<p><strong>Modifying the webplayer\u00a0 html page<\/strong><\/p>\n<ul>\n<li>Open &#8220;WebPlayer.html&#8221; to some text editor, for example default windows Notepad or <a title=\"http:\/\/notepad-plus-plus.org\/\" href=\"http:\/\/notepad-plus-plus.org\/\" target=\"_blank\">notepad++<\/a><\/li>\n<li>You are now viewing the HTML source, find lines:<br \/>\nvar config = {<br \/>\nwidth: 960,<br \/>\nheight: 600,<\/li>\n<li>Replace those numbers with:<br \/>\nvar config = {<br \/>\nwidth: window.innerWidth,<br \/>\nheight: window.innerHeight,<\/li>\n<li>Go down a bit, find lines:<br \/>\nbody {<br \/>\nfont-family: Helvetica, Verdana, Arial, sans-serif;<br \/>\nbackground-color: white;<br \/>\ncolor: black;<br \/>\ntext-align: center;<br \/>\n}<\/li>\n<li>After line &#8220;text-align: center;&#8221;, add these lines:<br \/>\nmargin:0px;<br \/>\npadding:0px;<br \/>\nwidth:100%;<br \/>\nheight:100%;<\/li>\n<li>Next find line:<br \/>\ndiv.content {<br \/>\nmargin: auto;<br \/>\nwidth: 960px;<br \/>\n}<\/li>\n<li>Modify that style to:<br \/>\ndiv.content {<br \/>\nmargin: auto;<br \/>\nwidth: 100%;<br \/>\nheight:100%;<br \/>\n}<\/li>\n<li>Find this part:<br \/>\ndiv#unityPlayer {<br \/>\ncursor: default;<br \/>\nheight: 600px;<br \/>\nwidth: 960px;<br \/>\n}<\/li>\n<li>Modify it to:<br \/>\ndiv#unityPlayer {<br \/>\ncursor: default;<br \/>\nheight: 100%;<br \/>\nwidth: 100%;<br \/>\n}<\/li>\n<li>*NEW: Insert this style also, to override embed object width:<br \/>\nembed<br \/>\n{<br \/>\nwidth:100% !important;<br \/>\n}<\/li>\n<li>Next we just remove the extra elements from the page, so that only the player is left<\/li>\n<li>Find this line, and delete it:<br \/>\n&lt;p&gt;&lt;span&gt;Unity Web Player | &lt;\/span&gt;v4d&lt;\/p&gt;<\/li>\n<li>Same here, remove this line:<br \/>\n&lt;p&gt;&amp;laquo; created with &lt;a href=&#8221;http:\/\/unity3d.com\/unity\/&#8221; title=&#8221;Go to unity3d.com&#8221;&gt;Unity&lt;\/a&gt; &amp;raquo;&lt;\/p&gt;<\/li>\n<li>Save the html file and test it!<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Making the webplayer 100% width &amp; height: Publish your project to webplayer (default template) File \/ Build Settings Select webplayer as platform Click &#8220;Add current&#8221;, if you havent added your scene to the build list yet Click &#8220;Player settings&#8221; From panel &#8220;Resolution &amp; presentation&#8221;, you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1798,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[148,3],"tags":[457,461,460,459,456,458],"class_list":["post-1796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-help","category-unity3d","tag-457","tag-css","tag-fullscreen","tag-height","tag-webplayer","tag-width"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/03\/unity_webplayer_100_percent_width_heigth.jpg?fit=680%2C374&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-sY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/1796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=1796"}],"version-history":[{"count":3,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/1796\/revisions"}],"predecessor-version":[{"id":2580,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/1796\/revisions\/2580"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/1798"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=1796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=1796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=1796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}