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 man muss noch dem Modul dem <Shortcode> eine ID zuweisen. Damit der Resizer weiß wenn oder was es bearbeiten soll. 

"h5p-spiel" noch eintragen 

Erweitert > CSS ID > h5p-spiel