H5P Embed / iFrame not displaying correctly

Kia ora

First time poster, long time reader :)

We have an issue when trying to embed H5P into a Moodle (4.1), Text and Media activity. Images attached of the two different problems:

First problem: iFrame crops the Interactive Book navigation at the bottom of the page. 
Second problem: iFrame opens long and narrow.
This is sporadic, and across user roles and browser types. Almost always happening in a new browser session, a Refresh does fix problem two, not problem one.

<iframe src="https://moodle.ucol.ac.nz/mod/hvp/embed.php?id=860730" width="100%" height="1166px" frameborder="0" allowfullscreen="allowfullscreen" 
title="Multifactor authentication (MFA) interactive book" style="width: 100%; height: 1166px;"></iframe><script src="https://moodle.ucol.ac.nz/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>
OR THIS
<iframe src="https://moodle.ucol.ac.nz/mod/hvp/embed.php?id=860730"  frameborder="0" allowfullscreen="allowfullscreen" 
title="Multifactor authentication (MFA) interactive book" style="width: 100%; height: 1166px;"></iframe><script src="https://moodle.ucol.ac.nz/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>

You'll notice in image 1 Embed.jpg that we have the full editable H5P activity on the course page, "hidden but available". There are no problems with display size when accessing the H5P activity this way. What we are wanting to achieve is an improved user experience by having the H5P activity display on the course page, without the need to click to open. It makes no difference having the original h5P editable file unhidden.

Any help greatly appreciated.

Ngā mihi
Suz