Interactive Video - Full Screen Mode does not work

Submitted by mworm on Fri, 06/16/2023 - 10:59
Forums: 
Bugs in content types

Hi,

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="https://static.dgnb.de/fileadmin/dgnb-akademie/de/e-learning/Video_-_Der..." 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!!

 

Attachments: 
Image icon Bug Vollbildmodus H5P.png
Summary: 
Interactive Video - Full Screen Mode does not work
Content types: 
Interactive Video
BV52's picture

BV52

Fri, 06/16/2023 - 18:19

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.

-BV

 

otacke's picture

otacke

Sat, 06/17/2023 - 09:42

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.

mworm

Mon, 06/19/2023 - 08:54

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

Attachments: 
Image icon Screenshot 2023-06-19 084937.png
otacke's picture

otacke

Mon, 06/19/2023 - 11:27

Hi!

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.

Best,
Oliver

mworm

Tue, 07/04/2023 - 16:42

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

otacke's picture

otacke

Tue, 07/04/2023 - 20:06

You're welcome.

mworm

Tue, 07/04/2023 - 16:43

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