- Home /
HTML Question, making web player fill out web browser window?
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity Web Player | ShuLei</title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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 config = { width: 960, height: 600, 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], "CharacterTest.unity3d"); }); --> </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 { margin: auto; width: 960px; } 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: 600px; width: 960px; } --> </style> </head> <body> <p class="header"><span>Unity Web Player | </span>ShuLei</p> <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> <p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p> </body>
I dont know any HTML, I searched about it and found a script taht worked, but when it comes to networking, the auto generated one with unity only works. What do I put in this HTML code, to make it fill the whole browser window? Where do I put '100%'? (read about it)
Answer by MFen · Dec 16, 2013 at 09:18 PM
Using the default format that unity provides for you, edit with notepad++ (or anything else but the lines may be different)
Line 15/16 says something to the effect of
if (typeof unityObject != "undefined") { unityObject.embedUnity("unityPlayer", "WebPlayer.jpg", 1286, 804);
Change the 1286 to 100% and 804 to 100%
The one I posted, is what Unity provides me with notepad++, if I change the width: 960, height: 600, at line 17, to 100% both of them, and puts it on my website, it just keep telling me to download unity web player.
Answer by Madswint · Dec 16, 2013 at 09:57 PM
Figured it out, here's the code to anyone in same problem (change the CharacterTest.unity3d to your file eg. Test.unity3d
<!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>
<title>Name</title>
<meta charset="iso-8859-2">
<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 config = {
width: "100%",
height: "100%",
params: { enableDebugging:"0" }
};
config.params["disableContextMenu"] = true;
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], "CharacterTest.unity3d");
});
detectLang();
function detectLang() {
var actualLang = (navigator.language) ? navigator.language : navigator.userLanguage;
if(actualLang=="pl"){
document.title = "Pe³ne okno przegl±darki";
}
}
-->
</script>
<style type="text/css">
<!--
/* hide from ie on mac \*/
html {
height:100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
/* end hide */
body {
height:100%;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: #cccccc;
color: #808080;
text-align: center;
font-size: medium;
border:0;
padding: 0;
margin: 0;
overflow:hidden;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
div#content {
width: 100%;
height: 100%;
border:0;
padding: 0;
margin: 0;
overflow:hidden;
}
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.missing img {
border-width: 0px;
}
div#unityPlayer {
cursor: default;
width: 100%;
height: 100%;
}
-->
</style>
</head>
<body>
<div id="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>
</div>
</body>
</html>
Your answer
Follow this Question
Related Questions
Trying to resize Unity WebPlayer control when resizing browser 1 Answer
Web based AR app 9 Answers
HTML text box in iPhone Unity? 0 Answers
Webplayer telling me to install but its already been installed? 3 Answers
custom webplayer not building project 0 Answers