diff --git a/README.md b/README.md index 0622a4b..bb8a6ab 100644 --- a/README.md +++ b/README.md @@ -154,6 +154,92 @@ server { Eine vollständige Beispiel-Konfiguration findest du in `nginx.conf.example`. +## iFrame-Einbindung + +Hördle kann problemlos als iFrame in andere Webseiten eingebettet werden. Die App ist responsive und passt sich automatisch an die iFrame-Größe an. + +### Grundlegende Einbindung + +```html + +``` + +### Genre-spezifische Einbindung + +Einzelne Genres können direkt eingebunden werden: + +```html + + + + + +``` + +### Special-Einbindung + +Auch thematische Specials können direkt eingebettet werden: + +```html + +``` + +### Empfohlene Einstellungen + +- **Mindesthöhe:** 800px (damit alle Elemente sichtbar sind) +- **Breite:** 100% oder mindestens 600px +- **`allow="autoplay"`:** Erforderlich für Audio-Wiedergabe +- **Responsive:** Die App passt sich automatisch an mobile Geräte an + +### Beispiel mit responsiver Höhe + +```html +
+ +
+``` + +### Hinweise + +- Der Spielfortschritt wird im LocalStorage des iFrames gespeichert +- Nutzer können innerhalb des iFrames zwischen Genres wechseln (Navigation bleibt erhalten) +- Die Teilen-Funktion funktioniert auch im iFrame +- Für beste Performance sollte der iFrame auf derselben Domain wie die Hauptseite gehostet werden (vermeidet CORS-Probleme) + ## Troubleshooting ### Audio-Dateien lassen sich nicht abspielen (in Produktion mit Nginx)