I just asked & answered a very basic mistake of mine, I hope posting on this issue straight away isn't too spammy. I'm following the instructions I've found here: https://forum.unity3d.com/threads/solved-how-to-upload-a-webgl-game-and-embed-it-into-a-weebly-page....
Basically I want to put my portfolio of game prototypes online, and I've gotten it mostly working so far, but the WebGL window is rendering in completely the wrong place. You can see below I've attached screenshots of how I've positioned the Embed Code element in the editor, and how it shows up on the published website.
Obviously it should be rendering closer to the header, above the big bold WAT text, and definitely not underneath the footer. I've tried adding dividers and so on, but nothing is fixing this. I've added the text to better illustrate the point that the rendering is way off.
Here's the code I have in the Embed Code section:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Tree Generator Prototype</title>
<link rel="shortcut icon" href="/files/theme/treegenproto/TemplateData/favicon.ico">
<link rel="stylesheet" href="/files/theme/treegenproto/TemplateData/style.css">
<script src="/files/theme/treegenproto/TemplateData/UnityProgress.js"></script>
<script src="/files/theme/treegenproto/Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "/files/theme/treegenproto/Build/HTML5.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">Tree Generator Prototype</div>
</div>
</div>
</body>
</html>Any ideas as to what I can do to fix this? I've considered adding some sort of frame around the HTML as a workaround, but my HTML knowledge is pretty lacking.
I've found a solution, but fair warning: it's ugly.
I've replaced the code I had before with this: https://pastebin.com/kMvYc2Ym
I've put it in a pastebin because the code wasn't rendering very well on this forum, but basically it's the old HTML, minified and escaped to fit in the srcdoc property of an iframe, in order to force its position and size to be properly detected by Weebly. So I hope that helps if anybody has the same problem I've had.
EDIT: And here's a screenshot to show the results.
I've figured out a workaround that makes it look less terrible, but still not exactly good. I've added this code underneath the other <div> sections:
<div id="padding" style="width: 960px; height: 800px"></div>
Now it looks like this:
So that's better, but the massive blank space above is still a serious problem.
I've found a solution, but fair warning: it's ugly.
I've replaced the code I had before with this: https://pastebin.com/kMvYc2Ym
I've put it in a pastebin because the code wasn't rendering very well on this forum, but basically it's the old HTML, minified and escaped to fit in the srcdoc property of an iframe, in order to force its position and size to be properly detected by Weebly. So I hope that helps if anybody has the same problem I've had.
EDIT: And here's a screenshot to show the results.
