Interactive Video - Full Screen Mode does not work


I'm experiencing trouble with full screen mode of an embedded HTML version of "Interactive video".

That's what I did:

1) I created the H5P interactive video using the desktop tool Lumi.

2) I exported to HTML. In this HTML the full screen mode works fine.

3) I uploaded the HTML to my website.

4) I embedded the HTML via iframe from my website to my LMS. Using the following code:

<iframe src="" width="1038" height="650" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Result in full screen: The video is only placed in the upper left corner.

Guess the iframe code is wrong - can somebody please help?

Thank you!!


Interactive Video - Full Screen Mode does not work
Content types: 
BV52's picture

Hi mworm,

Our developers did not create Lumi so I suggest that you reach out to Lumi support. You can find their contact email throught their site. However, developers of Lumi frequents this forum so may still get an answer from them.



otacke's picture

It's neither a fault of H5P nor of Lumi. There's simply no way for H5P to resize the iframe that you embedded the static HTML version into.

Alright, thank you! So I'd need a dynamic HTML code. Is H5P somehow providing this or would I need someone with coding skills to help me out here?

If I export my video from Lumi including the embed code, it shows only the static one. The field for dynamic embed code is empty (see file attached)...

otacke's picture


You need to establish communication between the page that is hosting the iframe and the page that delivers the content inside the iframe. That's what browsers do not allow by default for security reasons. One needs to have a custom "postMessage" process.

In your case, the static HTML file should already contain the functionality that H5P provides to communicate with the outside world of the iframe, but the page that embeds it needs to provide the respective counterpart. That is what the `h5p-resizer-script.js` script is for. It needs to be called alongside the iframe code as it would when you embed "regular" H5P content from a page. You should place that script on the server that also hosts the iframe and then use something such as: 

<iframe src="THE_URL_TO_THE_STATIC_HTML_FILE.html" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *" title="Interactive Video"></iframe>
<script src="THE_URL_PATH_TO_THE_RESIZER_SCRIPT/h5p-resizer.js" charset="UTF-8"></script>

In theory, this should do the trick. If the platform that hosts the iframe filters out scripts, however - you should check that - this will not work, of course.


Hi @otacke, thank you so much for this script. It did work perfectly fine!

otacke's picture

You're welcome.

Hi Oliver, thank you so much for this script! It did work perfectly fine!