iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -
Number of replies: 22

Hallo an Alle!

Ich versuche H5P Inhalte in einem Textfeld von Moodle (3.8.4) mit Design Snap (3.8.3) anzuzeigen:

H5P importieren:

Wenn ich den H5P Inhalt exportiere und in einem Textfeld mit dem Button "H5P einfügen" wieder importiere, dann kann ich weder einen automatischen Abschluss einstellen, noch wird der Fortschritt (bei Quiz und Text Area) gespeichert. Beim Einbetten funktionieren beide Dinge gut. 

H5P einbetten:

Aber mein Problem beim Einbetten ist folgendes: 

  • ich erstelle einen h5p Inhalt
  • kopiere den Code fürs Einbetten
  • und füge ihn im Textfeld im HTML Modus ein: <iframe src=...>
  • um die Breite an das Textfeld anzupassen kann ich folgendes ausbessern: width="100%" anstatt der Px-Zahl (und das funktioniert auch gut, sowohl bei der Ausgabe bei Edge, Chrome und Firefox), aber bei der Höhe muss man anscheinend - leider kann ich nicht programmieren sad   - eine fixe px-Zahl schreiben: z.B.  height="600" .  

Ich habe nun das Problem, dass diese Höhe nicht responsiv ist: Zum einen wird die Höhe in den unterschiedlichen Browsern mal  mit weniger mal mit mehr freiem Platz darunter angezeigt,  bzw. wenn die px-Höhe zu klein ist, kommt ein Bildlaufrahmen dazu, und zum anderen ist die Darstellung total falsch, bei unterschiedlichen Größen der Ausgabegeräte.

Ich stelle mir das so vor, dass ich da nur einen Programmiercode für die Höhe einfügen müsste, damit sie sich anpasst. Weiß das vielleicht jemand, oder liege ich dabei vielleicht völlig falsch, und das funktioniert gar nicht so einfach?

Einen lieben Gruß an alle und noch ein mit Gesundheit und Lebensfreude gefülltes neues Jahr smile

Barbara


 


Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Stefan Tritschler -
Liebe Barbara,

hast du mal versucht, die Höhe entweder ganz wegzulassen oder falls das nicht geht height="auto" anzugeben?
Normalerweise sollten beide Varianten oder eine davon funktionieren.

Liebe Grüße und viel Erfolg
Stefan
Average of ratings: -
In reply to Stefan Tritschler

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -

Hallo Stefan,

ich habe es probiert, leider funktioniert weder heigt="auto", noch das weglassen. Da wird der Inhalt mit geringer Höhe angezeigt, dafür mit einem Laufrahmen. Aber ich möchte eben, dass die Höhe sich anpasst ohne den Laufrahmen. 

liebe Grüße
Barbara

Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Stefan Tritschler -
Liebe Barbara,

ich habe es jetzt nochmal getestet und bei mir funktionieren alle Varianten nicht außer height="auto". Das funktioniert bei mir super.
Du hast in deinem Beitrag heigt statt height geschrieben - war das nur hier im Forum oder vielleicht auch in deinem iFrame?

Liebe Grüße
Stefan
Average of ratings: -
In reply to Stefan Tritschler

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Stefan Tritschler -
PS: Vor allem funktioniert es mit der beschriebenen Einstellung dann, wenn man Bearbeiten ausgeschaltet hat!
Average of ratings: -
In reply to Stefan Tritschler

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -
Lieber Stefan,
jetzt habe ich auch noch mal alles durchgetestet:
der Einbettungscode schaut so aus:



width stelle ich auf 100 % (sonst passt auch die Breite nicht)
bei height schreibe ich ein Zahl rein, wie im Bsp. 600, dann passt der Inhalt in einer bestimmten Größe, ist aber ist nicht responsiv (und bei einem kleineren Bildschirm entsteht gleich viel weißer Platz unter dem Textfeld).
Wenn ich bei height="auto" schreibe, dann macht er mir ein in der Höhe niedriges Fenster mit Laufrahmen:

jetzt wird es aber echt seltsam (ich kann das überhaupt nicht verstehen, was da passieren könnte):
  • schalte ich den Bearbeitungsmodus aus, wie du es mir im P.S. geschrieben hast: stimmt es plötzlich, klicke ich im Browser aber auf aktualisieren - kommt wieder der Laufrahmen.
  • Teste ich den Kurs als echter Teilnehmer, passt die Höhe (auto)  in Edge, nicht aber in Chrome und Firefox. Aber auch in Edge nicht immer (keine Ahnung woran das liegt)
  • ich habe auch probiert die temporären Dateien im Browser zu löschen, es ändert nichts.
  • Ich habe es auch mit einem anderen Design probiert (Classic anstatt Snap) - ändert auch nichts (also an Snap liegt es nicht)

im Einbettungscode ist so ein <script...> drinnen: beim Kopieren des Codes wird es mir angeboten: aber ob ich es drinnen lasse, oder lösche, verändert sich nichts. 



Vielleicht fällt dir noch was dazu ein... sonst aber auch ein großes Danke für dein Testen!

liebe Grüße
Barbara

Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Stefan Tritschler -
Liebe Barbara,

ich bin mit den Vorbereitungen für den Fernunterricht ab morgen etwas "durch den Wind" und ich schreibe deswegen nur kurz und knapp... Bitte entschuldige, du hast alles so schön und ausführlich beschrieben!

Die besten Erfahrungen habe ich gemacht, indem ich die Standardeinstellung der Höhe und Breite lasse. Es ist immer sehr groß angesetzt, aber es wird dann eigentlich je nach Bildschirm/ Browser/ Gerät verkleinert und responsiv dargestellt. Sobald ich die Größe ändere, endet es immer in einem langen Testlauf, bis es letztendlich passt... Hast du es mal mit der angegebenen Standardgröße versucht und wie sieht es dann aus?

Den Script-Code unten brauchst du (meiner Einschätzung nach) nicht beachten. Dieser Code ist nämlich auch automatisch im Einbettungscode mit eingefügt.

Wie gesagt, bitte entschuldige die kurze Angebundenheit... Ich bin gespannt, ob trotzdem etwas dabei war?

Liebe Grüße und weiterhin viel Erfolg!
Stefan
Average of ratings: -
In reply to Stefan Tritschler

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Tobias Boss -
Liebe Barbara

Ich kann deine Situation leider nicht nachstellen, da ich schon Moodle 3.10 habe und wie Ralf bereits beschrieben hat, da das Einbetten von H5P Inhalten deutlich einfacher und etwas besser funktioniert.
Was mir aber gerade aufgefallen ist, das Seitenverhältnis bei deinem Fenster "Einbetten" 1604 x 206px ist ein sehr spezielles Seitenverhältnis und dein Beispiel Bild mit der Laufleiste sieht etwa nach diesem Seitenverhältnis aus. Könnte es sein, dass es durch das Seitenverhältnis 1604x206 und deinen Angaben Width=100% und hight=600 zu einem Konflikt kommt resp. das Eine das Andere überschreibt?

Gruss Tobias
Average of ratings: -
In reply to Tobias Boss

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -

Lieber  Tobias,

Leider ist es nicht das ursprüngliche Seitenverhältnis, egal was ursprünglich drinnen steht, er macht immer dieselben Laufrahmen. Lasse ich die px-Werte stehen, habe ich einen Laufrahmen sowohl in der Breite als auch in der Höhe, stelle ich die Breite auf 100% passt die Breite, aber die Höhe muss ich "erraten", auto funktioniert leider nicht...

Aber wie du und Ralf geschrieben habt, ich warte bis wir Moodle 3.10 installieren, (bei uns hinkt das immer ein bisschen hinten nach, wegen dem Design Snap, das nicht so schnell mitzieht). 

Aber vielen Dank für deine Anregung!

liebe Grüße
Barbara

Average of ratings: -
In reply to Stefan Tritschler

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -

Lieber Stefan,

wenn ich die Höhe und die Breite lasse, dann hab ich einen Laufrahmen in der Breite und in der Höhe, das war der Grund, warum ich angefangen habe zu basteln.
Ich glaube ich warte einfach bis wir die nächste Moodle-Version installieren, wie Ralf geschrieben hat, ab 3.10. geht das Einbetten viel besser...

Vielen vielen Dank für deinen Aufwand!!! 

Und viel Erfolg im Fernunterricht!

Barbara

Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Ralf Hilgenstock -
Picture of Besonders aktive Moodler Picture of Deutsche Moodle Übersetzer Picture of Entwickler Picture of Moodle Partner Picture of Translators
In Moodle 3.8 wird das Ergebnis nicht gespeichert. Hier müsstest du das damalige Zusatzplugin installieren, ab 3.9 ist das zum Erstellen und Auswerten in Moodle Standard. Achtung: obwohl es so aussieht, ist es nicht das gleiche Plugin. Ab 3.10 ist auch ein Einbetten möglich.
Average of ratings: -
In reply to Ralf Hilgenstock

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -

Hallo Ralf, 

danke für die Info! Dann freu ich mich auf 3.10!

darf ich dir noch 2 Fragen stellen?

  • welches Zusatzplugin meinst du ?
  • und weißt du zufällig, kann es Probleme geben, wenn das Design Snap, das wir verwenden, erst bei 3.8.3 ist und wir auf Moodle 3.10 umstellen?

liebe Grüße Barbara

Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Ralf Hilgenstock -
Picture of Besonders aktive Moodler Picture of Deutsche Moodle Übersetzer Picture of Entwickler Picture of Moodle Partner Picture of Translators
Hallo Barbara

In Moodle 3.8 gibt es die Möglichkeit über den Editor fertige H5P Pakete einzubinden. Man kann ein Plugin zusätzlich installieren https://moodle.org/plugins/mod_hvp. Das erlaubt in 3.8 auch das Erstellen. Du erkennst es am schwarz-weißen Logo.
In Moodle 3.9 gibt es Links in der Navigationsleiste den Inhaltsspeicher und eine H5P Aktivität mit blauem Logo. Das ist die neue Funktion.

Für das snap-Theme gibt es mehrere Problemmeldungen unter https://github.com/open-lms-open-source/moodle-theme_snap/issues
Ich kann nicht erkennen, ob die inzwischen gelöst sind. Der Code wurde angeblich für 3.9.3 bereitgestellt.
Average of ratings: -
In reply to Ralf Hilgenstock

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -
Danke Ralf!
Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Max Blindenhoefer -
Hallo,

ich stehe vor genau demselben Problem, dass in Moodle 3.8 eingebette H5P-Inhalte immer wieder in Bildlaufrahmen angezeigt werden. Meine (laienhaften) Änderungsversuche im HTML Code haben zu keiner Verbesserung geführt.

Der HTML Code sieht bei mir so aus:

<iframe src="https://www.moodle-zwb.de/mod/hvp/embed.php?id=3095" width="600" height="596" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <script src="https://www.moodle-zwb.de/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>

Anscheinend wird der Code nach Änderungen und erneutem Laden der Seite auch immer wieder zurückgesetzt. Ich habe den Iframe über den Einbetten-Button unter der Anzeige der H5P Aktivität kopiert und dann in ein Textfeld eingefügt. Der Einbetten-Button im Editor funktioniert bei uns leider nicht richtig.

Habt ihr inzwischen eine Lösung für das Problem gefunden?

Viele Grüße
Max 
Average of ratings: -
In reply to Max Blindenhoefer

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Dag Klimas -
Picture of Besonders aktive Moodler Picture of Deutsche Moodle Übersetzer Picture of Translators
Hallo Max,

vielleicht gibt dir das Video "Was tun, wenn die Breite der H5P Inhalte nicht zur Bildschirmhöhe passt" einen Lösungsimpuls. Den Code müsste ein Admin hinterlegen.

https://youtu.be/LWAzI_PkJw4

VG Dag
Average of ratings: -
In reply to Dag Klimas

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Max Blindenhoefer -
Hallo Dag,

danke für das Video! Wenn ich das richtig verstehe, funktioniert das nur, wenn man die H5P Inhalte über den Editor einfügt und der h5p-Platzhalter verwendet wird. Da das Einfügen über den Editor bei uns nicht funktioniert (Es werden im Editor nur schwarze Kästen angezeigt und auf der Seite dann der Link als Text, aber nicht der H5P Inhalt) habe ich die H5P Inhalte immer über iframe eingebettet. Man müsste dann wahrscheinlich die Breite der iframes irgendwie begrenzen. Das weiß ich aber nicht, ob das Sinn macht und wie das gehen würde.

Das Problem ist bei mir auch nicht bloß, dass die H5P Aktivität größer als der Bildschirm ist, sondern, dass der iframe selbst in einen Bildlaufrahmen gepackt wird. Das könnte man ja auch vielleicht irgendwo deaktivieren / unterbinden. Ich weiß nur nicht wo.

VG
Max
Average of ratings: -
In reply to Max Blindenhoefer

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -
Hallo Max,
ich denke wir haben das gleiche Problem, ich bette die h5p Inhalte auch in ein Textfeld ein. Wir haben inzwischen auf Moodle 3.9 umgestellt, da besteht das Problem aber auch noch.
Meine (nicht ganz zufriedenstellende) Lösung ist: bei der Breite schreibe ich: width="100%", dann passt die Breite exakt, aber die Höhe ist das Problem! Bei height="auto" kommt der Bildlaufrahmen mit relativ niedriger Fensterhöhe, also suche ich eine Pixelzahl, die bei einem großen Bildschirm funktioniert (z.B. bei Videos height="700"). Bei einer Ausgabe auf einem kleineren Bildschirm hat man unter dem Textfeld aber mehr oder weniger viel Freiraum, ist leider nicht besonders schön...
Leider habe ich noch keine andere Lösung gefunden - ich dachte mir auch - das muss doch leicht zu lösen sein.... aber...??
liebe Grüße
Barbara
Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Alexander Touloumtzidis -
Hat sich das Problem mittlerweile erledigt? Oder besteht es noch?
Average of ratings: -
In reply to Alexander Touloumtzidis

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Max Blindenhoefer -
Bei uns besteht es noch, lässt sich aber umgehen, wenn man die H5P Inhaltsdatenbank zum Einbetten nutzt.
Average of ratings: -
In reply to Alexander Touloumtzidis

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -
dieses Problem habe ich leider immer noch...
Average of ratings: -
In reply to Barbara Misslinger

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Alexander Touloumtzidis -
Habe versucht euer Problem zu reproduzieren, aber bei mir erscheint kein Bildlaufrahmen.

Könntet ihr mal eine Anleitung schreiben, um das Problem zu reproduzieren und einen Screenshot machen? Kann sein, dass man euer Problem mit etwass CSS lösen kann.
Average of ratings: -
In reply to Alexander Touloumtzidis

Re: iframe: automatische höhe einstellen beim einbetten von h5p Inhalten

by Barbara Misslinger -

Danke Alexander,

ich habs oben genau beschrieben - auch mit Bildern, aber ich kann auch mit meiner nicht perfekten Lösung (siehe auch oben) leben. Danke aber für deine Hilfsbereitsschaft!

Barbara

Average of ratings: -