Hugo shortcode for embedding Unity WebGL players – updated with code

Want to embed Unity WebGL players easily inside your Hugo website? Here’s a shortcode for you.

Multiple Unity WebGL players on a single page using Hugo shortcodes

Using Hugo shortcodes and modifying the default Unity WebGL player to allow for easy embedding within a Hugo page, and adding support for multiple playes on the same page without using iframes.

Load Unity WebGL player only after user clicks a button

Unity allows you to publish WebGL builds of your games, which is great for easily sharing prototypes or publishing complete projects. But these builds can get large (hundreds of megabytes) and you may wish to warn your users before the download initiates. It’s pretty easy to do this by modifying the html page output by the Unity WebGL build.

This post assumes only beginner-level knowledge of HTML, CSS and JavaScript.

Hugo shortcode for embedding Unity WebGL players

I want to embed my Unity WebGL builds inside this site, rather than linking to the content in a new tab (which is over in Azure blob storage). Now I can do that!

This is really just a test. If it works, I’ll tidy it up and share the code later.

Unity WebGL builds stuttering with Application.targetFrameRate

Getting stuttering and poor performance in WebGL builds, but there is plenty of CPU power to spare and non-WebGL builds running smooth? It could be because of Application.targetFrameRate.