MINESWEEPER

How to Embed Minesweeper in a Canvas Page

Canvas accepts iframes in any Rich Content Editor field, so a no-guess Minesweeper board goes into a Page, an Assignment or an Announcement with one paste in HTML view. The things that go wrong are almost always outside the editor: an administrator's allowed-domains list, a school web filter, or a board too wide for the course layout.

Time needed
About 2 minutes
Where
Pages > Add Page
Editor view
HTML Editor (</>)
Board that fits
9x9, 344 x 472
<iframe
  src="https://play-minesweeper.games/embed/?size=beginner&noguess=1"
  width="344"
  height="472"
  frameborder="0"
  style="border:0;max-width:100%"
  loading="lazy"
  title="Minesweeper Game"
  allow="clipboard-write"
></iframe>
<p style="font:12px/1.5 Tahoma,'MS Sans Serif',Geneva,sans-serif;color:#555555;margin:6px 0 0;max-width:344px">
  <a href="https://play-minesweeper.games/" style="color:#555555">play-minesweeper.games</a> — free Minesweeper, no download
</p>

A Beginner 9×9 board in no-guess mode (noguess=1), so every board can be cleared by logic and nobody in the class loses to a coin flip. The frame is 344 × 472 pixels.

The paragraph after the iframe is the credit link that keeps the embed free. Canvas keeps its inline styles, so it looks the same on the page as in the generator preview.

Adding the game to a Canvas page

  1. Copy the classroom snippet

    Copy the code below, or build your own on the embed generator and add &noguess=1 to the src address. Take both parts: the iframe and the one-line credit paragraph under it. Canvas keeps every attribute in this snippet when it saves the page.

  2. Create a page: Pages > View All Pages > Add Page

    In your course, click Pages in Course Navigation. If the course has a front page, click View All Pages first, then click Add Page and give the page a title. Any other item that uses the Rich Content Editor works too: an Assignment, a Discussion, an Announcement or a Quiz description.

  3. Switch the Rich Content Editor to HTML view

    Click the HTML Editor icon (the </> button at the bottom right of the editor, labelled "Switch to the HTML view"). Canvas opens the pretty HTML editor with line numbers. Click where the game should go and paste the snippet. If you prefer not to touch HTML, use Insert > Embed in the editor’s menu bar instead, paste the code into the Embed Code field and click Submit.

  4. Switch back and check the preview

    Click the HTML Editor icon again to return to the visual editor. The board should appear as a live preview inside the editor. If you see the iframe as a line of text instead, it was pasted into the visual editor rather than HTML view: undo, switch to HTML view and paste again.

  5. Save & Publish, then view as a student

    Click Save & Publish (or Save to keep it as an unpublished draft). Then open the page in Student View (the button on the course Settings page) and play a round to confirm the board loads, clicks register and the whole board fits.

The frame is blank: the admin's allowed domains

Canvas saves the iframe without complaint, so a blank rectangle on the published page is rarely an editor problem. Check these in order:

  • Content Security Policy. A Canvas administrator can switch on the Content Security Policy for the whole institution (Admin > the account > Settings > Security). Once it is on, Canvas only lets pages frame domains on the Allowed Domains list, plus Canvas's own and those of installed LTI tools. Ask your admin to add play-minesweeper.games under Domain Name and click Add Domain. Admins can also switch the policy off for a single course in its Settings, though most will prefer to add the domain. Teachers cannot change either setting.
  • School web filter. If the game also fails to open in a normal browser tab on the school network, the filter is blocking the domain, not Canvas. Our notes on playing Minesweeper at school cover what to ask IT for.
  • An http:// address. Canvas is served over HTTPS and browsers refuse insecure frames inside it. The snippet uses https://; keep it that way if you edit the URL.

To tell them apart, open the page, then open your browser's developer console. A message mentioning "Content Security Policy" and frame-src means the allowed-domains list; a filter usually shows its own block page inside the frame.

Where Canvas removes the iframe

Canvas cleans every Rich Content Editor field against its HTML allowlist when you save. The iframe passes in Pages, Assignments, Discussions, Announcements, Quizzes and the Syllabus. Two places behave differently:

  • Calendar event descriptions drop any iframe that is not Canvas's own media or app launch. Put the game on a Page and link the Page from the event.
  • Unsupported attributes are removed silently, for example allow-top-navigation in a sandbox value. The snippet uses none of them, so if you edited it and something stopped working, compare it with the original.

Choosing a size that fits the course layout

A Canvas page sits beside the global navigation and, when it is open, the course navigation menu, so the content column on a laptop is far narrower than the screen. The frame does not scale its board, so pick a size that fits the narrowest view your students use:

  • Beginner 9×9 — 344 × 472 pixels. The snippet above. Fits beside both menus, in the Canvas Student app and on phones.
  • Intermediate 16×16 — 536 × 664 pixels. Fits a laptop; use it for older students. Change the src to ?size=intermediate&noguess=1 and the width and height to match.
  • Expert 30×16 — 956 pixels wide. Wider than a Canvas content column on most laptops; link to the game instead.

Set the width and height in HTML view rather than by dragging the frame in the visual editor, so the numbers stay exact. If the board looks cropped at the bottom, the height is too small; if there is empty space under it, nothing is wrong.

Using it in class

The Minesweeper lesson for teachers is a 15-minute logic activity for exactly this board, with discussion prompts. A Canvas page works well for it: the board at the top, the rules students should find underneath, and a link to the printable Minesweeper worksheets for paper practice and homework. Add the page to the student to-do list from the page options if you want it on everyone's list for the lesson.

Canvas embed questions

Does Canvas allow iframes in pages?

Yes. iframe is on the Canvas HTML Editor Allowlist with the src, width, height, frameborder, loading and allow attributes this snippet uses, and style and title are allowed on every element. Canvas removes object and embed tags from Pages, and iframes from Calendar event descriptions, but an iframe in a Page, Assignment, Discussion, Announcement or Quiz is kept.

Why is the Minesweeper frame blank in Canvas?

The usual cause is the Content Security Policy. When a Canvas administrator enables it under Admin > Settings > Security, Canvas only allows frames from domains on the Allowed Domains list, and every other iframe stays empty. Ask your Canvas admin to add play-minesweeper.games to the list. The other common cause is a school web filter blocking game sites.

What size should the iframe be in Canvas?

Use the Beginner board at 344 by 472 pixels for most pages: it fits the content area with the course navigation open and on phones. The Intermediate board at 536 by 664 pixels fits on laptops. The Expert board is 956 pixels wide and is too wide for a normal Canvas page.

Can I use Insert > Embed instead of the HTML editor?

Yes. In the Rich Content Editor, choose Insert > Embed from the menu bar (or click the Embed icon in the toolbar, under the Options icon if your window is narrow), paste the snippet into the Embed Code field and click Submit. The result is the same iframe.

Does it work in the Canvas Student app?

Pages with the board open in the app like any other page content. The snippet includes max-width:100%, so the frame narrows on a phone instead of overflowing, and players place flags with a long press. Use the Beginner board if students mostly use phones.

Will the embed track my students?

No. The game needs no account, shows no ads and loads no third-party trackers. Best times stay in the browser that played them, and no-guess wins, which is what this snippet deals, are never submitted to the public leaderboard.

Everything on this page starts with a snippet from the generator: a game frame plus a one-line credit link that goes under it. Pick a board size and theme, decide whether to show the optional "Powered by" line inside the game, then copy the code.

Open the Minesweeper embed generator

Also useful: the Minesweeper widget generator and iframe options, how to play Minesweeper, and custom board sizes.