How to increase the size of Unity WebGL game window on itch.io?

Question

I just uploaded my first Unity WebGL build to itch.io but the window is really small so you can only see a small portion of the center of the actual game view

Game in question, along with exe downloads and public repo: https://lower-third.itch.io/blackbox

HTML:

<!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 | BlackBox</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
        var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebGL.json", { onProgress: UnityProgress });
    </script>
</head>
<body>
    <div class="webgl-content">
        <div id="unityContainer" style="width: 1920px; height: 1080px"></div>
        <div class="footer">
            <div class="webgl-logo"></div>
            <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
            <div class="title">BlackBox</div>
        </div>
    </div>
</body>
</html>

CSS:

.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

Like I said, it's my first time trying to use this stuff so I have no idea what div to change and what css to apply and didn't find any adequate answers online yet. All I've done is change the style of unityContainer in the index.html file to 1920x1080. This simply made my game render at a larger resolution without changing the size of the game view in itch, making the view even more useless. Everything else is just as Unity generated for the build.

For reference I am using URP and Unity 2019.3.0f6 in this project, but I doubt that has anything to do with my issue. The game is working fine in my browser. I just want to make the window as big as possible and make sure it displays the entirety of the game.

Does this answer your question? How do I fill white space on screen web gl unity?, also this — gman
It turns out that if you have completely stock settings you can auto detect the size of the canvas from the game dashboard on itch.io. That ended up fixing it. — lower third

lower third lower third · Accepted Answer · 2020-02-04T06:21:31

Turns out there is an auto-detect option if you use the default WebGL build settings in the itch.io game dashboard.

How to increase the size of Unity WebGL game window on itch.io?

1 Answers