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

```html
<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=<strong>28</strong>"`

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