Embedded h5p elements from Twillo not properly loaded

[JuliaHeiken]

When embedding h5p elements from Twillo, there are some icons not shown or sometimes the file cannot be loaded at all. On Twillo, the elements look fine.

[andre-dietrich]

Hi @JuliaHeiken ... could you provide a small code-example, how you embed the H5P elements? Either here as a markdown-code-block or you create an example at

https://liascript.github.io/LiveEditor/

and then share it by clicking on menu and then on snapshot-url ... this way, the URL will contain the entire content ...

[JuliaHeiken]

Sure, for example
<iframe src="https://www.twillo.de/edu-sharing/eduservlet/render?node_id=291a02e3-2fd0-4276-b49d-37c205fe945d" width="100%" height="840" frameborder="0" allowfullscreen="allowfullscreen" title="Research Data Management in the Energy Sector"></iframe>

[andre-dietrich]

You can try the following, add a persistent instruction to the global header-comment or locally per slide, where you add an IFrame ...

You can try this out here: LiveEditor

---

I hope this fixes your issue?

[JuliaHeiken]

Unfortunately, it doesn't. I think the issue is browser-dependent. The issue appears in chrome, but I just tried in Firefox and there it's working.

[andre-dietrich]

Ah, I see ... These little icons are actually fonts:

The problem you are facing is related to how different browsers handle the loading of web fonts from an iframe. Firefox seems to be able to handle the situation gracefully and only shows a warning, while Chrome fails with a 400 Bad Request error.

You could either try to use real images for this purpose or you have to ask your administrator to change the CORS settings for this case. This link should help solve the issue:

https://stackoverflow.com/questions/33197751/fonts-are-blocked-in-web-client-cors