How to Embed an HTML5 Game in a Website: WordPress, Wix, Google Sites

How to embed an HTML5 game in a website comes down to two steps: the game's files have to live at a public HTTPS address, and your page shows that address in an <iframe>. The iframe keeps the game's code, styles and keyboard handling apart from your site, so a game built with any engine works on any page that accepts embed code. Below is the embed code we recommend, how to make it responsive and safe, and the exact steps for WordPress, Wix, Google Sites, Weebly and Facebook.

If the game isn't online yet, start with how to host HTML5 games, which compares free and paid hosts and covers uploading by FTP.

Step 1: upload the HTML5 game to a website or host

You can't upload a game folder to most site builders, so the files usually live somewhere else:

• Your own hosting. Upload the whole build folder (the one with index.html, plus its assets and media) by SFTP or a file manager, for example to /games/liquid-lab/. The game is then at https://example.com/games/liquid-lab/.
• A static host such as Cloudflare or GitHub Pages, if your site builder can't store files.
• A URL where the game already runs, such as your own itch.io upload or a game a distributor licenses you to embed.

Open the game's URL on its own first. If it doesn't run there, it won't run in an iframe either.

The embed code: a basic iframe for an HTML5 game

This is the HTML5 game embed code we'd start from. It works on any page that accepts HTML:

<iframe
  src="https://games.example.com/liquid-lab/?lang=en"
  title="Liquid Lab, a water-sort puzzle game"
  width="960" height="540"
  allow="fullscreen; autoplay; gamepad"
  loading="lazy"
  style="border:0; display:block; max-width:100%;">
</iframe>

What each part does:

• src points at the game folder (the server returns its index.html). Our games read URL parameters here, so ?lang=fr starts in French and ?mute=1 starts muted, which suits a page where sound shouldn't surprise anyone.
• title names the frame for screen readers.
• width and height set the starting size; the next section makes it responsive.
• allow passes browser features into the frame. fullscreen lets the game's fullscreen button work (it replaces the old allowfullscreen attribute), autoplay passes on the browser's autoplay permission, which frames from another domain don't get by default, and gamepad lets controllers work in browsers that enforce it.
• loading="lazy" delays loading until the player scrolls near the game, so it doesn't slow down the rest of your page.

MDN's iframe reference lists every attribute, and its gamepad policy page notes that this directive is still marked experimental.

Make the embedded game responsive

A fixed 960 × 540 frame overflows on phones. Wrap the iframe in a box that keeps the game's aspect ratio and fills the column width:

<div style="aspect-ratio:16/9; width:100%; max-width:960px;">
  <iframe src="https://games.example.com/liquid-lab/"
    title="Liquid Lab" allow="fullscreen; autoplay; gamepad" loading="lazy"
    style="width:100%; height:100%; border:0; display:block;"></iframe>
</div>

Use the ratio the game was designed for: 16/9 for landscape games, 9/16 with a smaller max-width (around 420px) for portrait ones. Games that support both orientations, like most of ours, look best at the ratio of your page layout.

On phones, a game squeezed into a column is rarely fun. A common pattern is to show the iframe on desktop and, on small screens, a cover image with a Play button that opens the game's URL full screen. That also helps page speed, because the game only loads when someone wants it.

Sandbox and allow attributes: what to grant

The sandbox attribute switches off everything inside the frame and lets you turn features back on one at a time. It's worth using when you embed a game you didn't build.

Our games save progress locally, so a sandbox without allow-same-origin makes saves fail silently. A typical setting for a game hosted on a different domain from your site is sandbox="allow-scripts allow-same-origin allow-pointer-lock". Don't combine allow-scripts and allow-same-origin for a game served from your own domain: MDN warns that this lets the framed page remove its own sandbox. Serve untrusted games from a separate subdomain instead.

How to add an HTML5 game to WordPress

On a self-hosted WordPress site:

1. Upload the game folder by SFTP or your host's file manager to a folder outside WordPress's own directories, for example /games/pocket-tower-defense/. The Media Library won't take a game: it only accepts common media and document types and can't keep a folder structure.
2. Open the post or page in the block editor and add a Custom HTML block.
3. Paste the responsive embed code with your game's URL and publish.

That's the whole integration. There's no special HTML5 game engine WordPress integration to set up: the game runs as its own static app inside the frame, whether it's made with Phaser, Three.js or anything else. Plugins that add "game" blocks or shortcodes just output an iframe like the one above.

On WordPress.com, the hosted service, iframes and JavaScript are limited to sites on a plugin-enabled plan with hosting features activated. On other plans, link to the game instead, or host it elsewhere and use a plan that accepts embeds.

How to add an HTML5 game to a Wix site

Wix can't store a game folder, so host the game first, then:

1. In the Wix Editor, click Add Elements → Embed Code → Popular Embeds.
2. Choose Embed a site to show a URL, or Embed HTML to paste iframe code.
3. Click the element, choose Enter Website Address (or Enter Code), paste it and click Apply.
4. Drag the element to the size you want and publish.

Wix's help page notes that only HTTPS URLs and code are displayed, and that its embed elements are themselves iframes, so the size you set is the size players get. Set the element to the game's aspect ratio and check the mobile view separately.

How to add HTML5 games to Google Sites

Google Sites doesn't host HTML files, but it embeds them well:

1. Open your site and click Insert → Embed.
2. Paste the game's URL under By URL, or switch to Embed code and paste your iframe.
3. Click Insert, resize the box on the page, then Publish.

For a bigger play area, use Pages → Add → Full page embed, which gives the game a whole page. Per Google's instructions, JavaScript in embed code must sit inside <script> tags, and some sites block being embedded, so test the published page, not just the editor preview.

How to upload an HTML5 game to Weebly

Weebly works the same way:

1. Drag the Embed Code element onto the page.
2. Click it, choose Edit Custom HTML and paste your iframe.
3. Publish and check the live page; some embeds don't render in the editor.

For canvas games on Weebly, paste the iframe rather than the game's raw <canvas> and <script> code: the site's own scripts and styles can clash with a game pasted straight into the page. Weebly's embed help covers the element itself.

Embed an itch.io HTML5 game into your website

If you published the game on itch.io, open its Distribute tab, then Embed game. You pick the uploaded file, set the size and colour, and copy an iframe snippet; the embed includes a fullscreen button and a link back to the itch.io page. itch.io moderators ask people to use it only for their own games, so for anyone else's game, ask the developer or link to their page.

Rails, Django and other frameworks

To include an HTML5 game in a Rails site, copy the build into public/games/<name>/. Rails (or the web server in front of it) serves files in public/ as they are, so the game is at /games/<name>/ and you embed it in any view with the same iframe. Other frameworks have an equivalent static folder (static/ in Django, public/ in most JavaScript frameworks). Keep the game in its own folder so the framework's routing and asset pipeline don't touch its files.

How to add an HTML5 game to Facebook

Facebook posts don't accept iframes, so you can't embed a playable game in a post or page. You have two options:

• Share a link. Post the URL of the page that hosts the game. Add Open Graph tags (og:title, og:image, og:description) to that page so the link shows a proper preview.
• Publish it as an Instant Game. Meta's Instant Games are HTML5 games that run inside Facebook and Messenger. According to Meta's Instant Games FAQ, the game needs the FBInstant SDK, uploads as a ZIP with index.html at its root, and goes through review; the developer must also be accepted into Meta's Approved Partner Program first.

Our guide on where to publish HTML5 games compares Instant Games with portals and other platforms.

How to put a game into an HTML5 document

For a small single-file game, like the free games on our HTML game code page, you can paste the game straight into a page: the <canvas>, the <style> and the <script> go into your HTML document, and nothing else is needed. That's fine on a page you control fully. For anything bigger, or any page with its own scripts and styles, use an iframe: it keeps the game's CSS, global variables and key handlers away from the rest of your site.

Checklist before you publish the page

Test the embedded game, not just the game on its own:

• Keyboard focus. A game inside an iframe only gets key presses after a click. Make sure arrow keys and the space bar don't scroll your page while playing; games should call preventDefault() on the keys they use.
• Sound. Browsers block audio until the player interacts, so check that sound starts after the first tap and that there's a mute button.
• Fullscreen works from inside the frame (that's what allow="fullscreen" is for).
• Phones. Check portrait and landscape, and that the game isn't cut off.
• Saves. Reload the page and check that progress is still there.
• Rights. Only embed games you made, licensed, or that the owner provides embed code for.

If you'd rather start from games you're licensed to put on your own pages, our HTML5 games for websites page explains how that works, and game portals should read licensing for publishers.

We make and sell HTML5 game source code; links to our games are marked as ours.