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 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:

Diese Code-Abschnitt hinzufügen. !Wichtig! die ID-Nummer musst durch die passende vom neuen Spiel erstelle ID ersetzt werden:
"...?action=h5p_embed&id=28"  hier musst die 28 angepasst werden.

<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> 

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

man

Wichtig: mussErsetze nochdie demID-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 dem <Shortcode> eine ID zuweisen.zuweisen

Damit der Resizer weißkorrekt wennfunktioniert, odermuss wasdem 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 bearbeitenschon soll.funktionieren. Am besten kann dies durch die Verlinkung einer oberen Kachel auf das Hauptspiel getestet werden. Einfach darauf klicken und auf das Spiel navigieren.

"h5p-spiel" noch eintragen 

Erweitert > CSS ID > h5p-spiel