Allerdings behandelt der Editor dein iframe als Kasten mit fester Größe auf einem Raster – und genau dort gehen die meisten Einbettungen in Google Sites schief. Hier ist der genaue Weg durch den Bereich „Einfügen“ und so stellst du die Größe ein, damit nichts abgeschnitten wird.
Das Spiel über den Dialog „Einbetten“ einfügen
Den Einbettungscode aus dem Generator kopieren
Wähl im Generator Spielfeldgröße und Design und kopier den kompletten Code – das iframe und den Absatz mit der Quellenangabe darunter. Google Sites nimmt vollständiges HTML an, lass also beides stehen, statt es auf eine URL zu kürzen.
Die Seite öffnen und auf „Einfügen“ klicken
Öffne die Website unter sites.google.com, wähl die Seite, auf die das Spiel soll, und nutz den Bereich „Einfügen“ (Insert) rechts im Editor.
„Einbetten“ wählen und zum Tab „Code einbetten“ wechseln
Klick im Bereich „Einfügen“ auf „Einbetten“ (Embed). Der Dialog bietet zwei Wege: eine einfache Webadresse oder den Tab „Code einbetten“ (Embed code) für HTML. Wähl den Tab „Code einbetten“.
iframe einfügen, auf „Weiter“ und dann „Einfügen“ klicken
Füg den Code in das Codefeld ein und klick auf „Weiter“. Google Sites lädt eine Vorschau dessen, was angezeigt wird; zeigt sie das Minesweeper-Spielfeld, klick auf „Einfügen“, um es auf die Seite zu setzen.
Den Kasten im Raster anpassen und veröffentlichen
Die Einbettung landet als Kasten mit veränderbarer Größe auf der Seite. Zieh an den Griffen an Ecken und Kanten, bis das ganze Spielfeld ohne innere Scrollleiste zu sehen ist, und klick dann oben rechts auf „Veröffentlichen“, damit die Änderung online geht.
Der Kasten skaliert nicht – stell die Größe bewusst ein
Hier unterscheidet sich Google Sites von fast jeder anderen Plattform dieser Reihe. WordPress und Neocities zeigen dein iframe in der angegebenen Breite und lassen die Seite drumherum fließen. Google Sites setzt die Einbettung dagegen in einen Container auf seinem Layout-Raster, und dessen Größe ist das, was du gezogen hast. Die Seite darin wird nie passend skaliert – was nicht hineinpasst, wird einfach gescrollt.
Also erst ziehen, dann prüfen. Richte den Kasten nach diesen Maßen aus:
- Anfänger 9×9 – 344 × 472 Pixel. Passt in jede Spalte, jeden Abschnitt, auf jedes Handy.
- Fortgeschritten 16×16 – 536 × 664 Pixel. Passt am Desktop in einen normalen Abschnitt; scrollt auf Handys.
- Experte 30×16 – 956 × 664 Pixel. Braucht einen Abschnitt in voller Breite und einen Laptop-Bildschirm.
Gib dem Kasten etwa 10 Pixel mehr Höhe, als im Einbettungscode steht. Sonst kann der interne Innenabstand von Google Sites die unterste Felderreihe abschneiden – und wer die letzte Reihe nicht erreicht, kann das Spielfeld nicht lösen.
Was die zusätzliche Sandbox-Ebene ändert
Alles, was du über Code einbetten einfügst, wird in einem Rahmen dargestellt, den Google Sites selbst steuert. Dein iframe landet also eine Ebene tiefer, als du es geschrieben hast. In der Praxis heißt das:
- Das Spielen ist nicht betroffen. Linksklick zum Aufdecken, Rechtsklick für Flaggen und ein Klick (oder Doppelklick) auf eine erfüllte Zahl zum Öffnen der Nachbarn funktionieren, weil das Spiel das Kontextmenü des Browsers selbst unterdrückt.
- Berechtigungsattribute können wegfallen. Über
allow="..."angeforderte Funktionen, etwa der Zugriff auf die Zwischenablage zum Teilen eines gelösten Spielfelds, können vom Rahmen herausgefiltert werden. - Nichts, was du einfügst, kann den Rest deiner Website berühren. Genau dafür ist die Sandbox da – und deshalb ist Google Sites auch ein sicherer Ort für ein Spiel eines Drittanbieters.
- Ein leerer weißer Kasten heißt: Die Quelle lässt sich nicht einbetten. Bei anderen Websites passiert dir das oft; diese Einbettungsseite ist dafür gebaut, eingebettet zu werden, ein leerer Kasten bedeutet hier also fast immer einen Tippfehler in der URL.
- Auch die Quellenzeile landet in der Sandbox. Alles, was du in das Feld „Code einbetten“ einfügst, wird in diesem inneren Rahmen dargestellt und nicht als Teil des Markups deiner Seite. Lass sie dort – aber bei Google Sites lohnt es sich, direkt unter die Einbettung zusätzlich ein einfaches Textfeld mit demselben Link zu setzen, damit die Quellenangabe in der Seite selbst steht, wo Leser (und Suchmaschinen) sie tatsächlich sehen. Eine Zeile reicht: „Minesweeper von play-minesweeper.games“, mit verlinkten Worten.
Hinweise für Unterricht und Intranet
Ein großer Teil der Google-Sites-Seiten sind Klassenseiten, Vereinsseiten und interne Team-Hubs, und ein Minesweeper-Spielfeld passt zu allen dreien: Es braucht keinen Login, speichert nichts, macht keine Geräusche und ist auf dem Anfänger-Spielfeld in unter einer Minute gelöst.
Prüf zwei Dinge, bevor du für Schüler veröffentlichst. Erstens den Veröffentlichungsbereich: Im Dialog Veröffentlichen kannst du die Website auf deine Organisation beschränken, und die Einbettung verhält sich in beiden Fällen gleich. Zweitens die Netzwerkfilter – Schulnetze, die Spieledomains pauschal sperren, sperren auch das Fenster, und die Seite zeigt einen leeren Kasten. Teste im Schulnetz statt zu Hause. Wird das Spiel blockiert, findest du in unseren Hinweisen zu Minesweeper in der Schule, was meistens durchkommt.
Für ein Rätsel, das in eine Pause passt, erzeug den Code mit einem kleineren eigenen Spielfeld, zum Beispiel ?size=8x8&mines=8. Das passt bequem in einen Seitenleisten-Abschnitt einer Klassenseite.