Eigener H5P Resizer für Elementor: Anleitung

H5P Resizer für Elementor: Anleitung

Der myH5P_Resizer erlaubt es die H5P-Module automatisch zu skalieren und diese so passend auf das Endgerät zu zentrieren und mit deren End-Auflösung diese angelegt darzustellen.

Schritt 1: Shortcode-Widget in Elementor verwenden

Möchte der Nutzer Code von außen hinzufügen, so muss in Elementor das Widget "Shortcode" verwendet werden.
Dies ist in der Suchleiste vom Elementor-Editor zu finden.

Schritt 2: Code-Abschnitt einfügen

Füge den folgenden Code-Abschnitt im Shortcode-Widget ein:

<iframe id="game" src="https://learn.cw-wwrl.de/wp-admin/admin-ajax.php?action=h5p_embed&id=28" frameborder="0" title="Game"></iframe>
<script src="https://learn.cw-wwrl.de/wp-includes/js/myH5P_Resizer.js" charset="UTF-8"></script> 

...?action=h5p_embed&id=28"

Wichtig: Ersetze die ID-Nummer 28 durch die passende ID des neu erstellten H5P-Spiels.
 Die ID ist in der H5P-Spiele Übersicht zu finden.

Schritt 3: Dem Modul eine ID zuweisen

Damit der Resizer korrekt funktioniert, muss dem Shortcode-Modul eine ID zugewiesen werden. Gehe dazu folgendermaßen vor:

1. Wähle das Shortcode-Widget aus.
2. Gehe im Elementor-Editor zu Erweitert.
3. Trage unter CSS ID die ID h5p-spiel ein.

Danach sollte es schon funktionieren. Am besten kann dies durch die Verlinkung einer oberen Kachel auf das Hauptspiel getestet werden. Einfach darauf klicken und auf das Spiel navigieren.