Improve preview of H5P content blocks in the Media Pool (avoid nested iFrames)

If you need any help in filling out this wiki page, please visit our ILIAS Community FAQ. And please complete the metadata information in the right column after having created the page.

1 Initial Problem

In the ILIAS Media Pool, content blocks containing H5P elements are either not displayed at all or only rendered incorrectly in the preview. In practice, this results in either a permanent “Content is loading …” message or a completely empty preview. As a consequence, authors are unable to reliably identify and select suitable content blocks from the Media Pool.

According to feedback from the responsible maintainer, the Media Pool preview is implemented using an iFrame, while H5P content itself is also rendered within an iFrame. This leads to an iFrame-within-iFrame structure, which constitutes invalid HTML and is not reliably handled by browsers.
Since nearly all H5P content is rendered via iFrames and the Media Pool cannot reliably determine how content will ultimately be embedded (e.g. due to the ILIAS Page Editor), neither a proper preview nor a differentiated error message can currently be provided.

2 Conceptual Summary

H5P-based content blocks should be displayed in the Media Pool in a technically stable and meaningful preview, enabling authors to clearly identify and select appropriate content.
We propose to replace the <iframe> with another HTML element, like a <section> or a simple <div> element, following the approach used in the Glossary. (https://docu.ilias.de/go/wiki/wpage_8686_1357)

This change would:

3 User Interface Modifications

3.1 List of Affected Views

3.2 User Interface Details

Currently, the preview area either displays incomplete loading messages or remains empty for H5P-based content blocks. This provides no meaningful information to the user and gives the impression of a malfunction.

3.3 New User Interface Concepts

{ If the proposal introduces any completely new user interface elements, you might consult UI Kitchen Sink in order to find the necessary information to propose new UI-Concepts. Note that any maintainer might gladly assist you with this. }

3.4 Accessibility Implications

{ If the proposal contains potential accessibility issues that are neither covered by existing UI components nor clarified by guidelines, please list them here. For every potential issue please either propose a solution or write down a short risk assessment about potential fallout if there would be no solution for the issue. }

4 Additional Information

4.1 Involved Authorities

If this request is related to multiple components, please list both authorities for all related components.

4.2 Technical Aspects

Current issue caused by nested iFrames (Media Pool preview + H5P rendering). Invalid HTML structure leads to unpredictable browser behavior. Media Pool cannot reliably determine final embedding context of content.

4.3 Privacy

{ Personal data that will need to be stored or processed to implement this feature have to be listed here. For each date give a short explanation why it is necessary to use that date. }

4.4 Security

{ Does the feature include any special security relevant changes, e.g. the introducion of new endpoints or other new possible attack vectors. If yes, please explain these implications and include a commitment to deliver a written security concept as part of the feature development. This concept will need an additional approvement by the JourFixe. }

4.5 Contact

Person to be contacted in case of questions about the feature or for funding offers:  {Please add related profile link of this person}

4.6 Funding

A possible funding contribution by DLRG is under consideration.

5 Discussion

6 Implementation

Feature has been implemented by {Please add related profile link of this person}

6.1 Description and Screenshots

{ Description of the final implementation and screenshots if possible. }

6.2 Test Cases

Test cases completed at {date} by {user}

6.3 Privacy

Information in privacy.md of component: updated at {date} by {user} | no change required

6.4 Approval

Approved at {date} by {user}.