Moodle plugin, iframes and course presentation dimensions

Submitted by macnz2000 on Wed, 06/06/2018 - 10:59
Forums: 
General discussion

Hey folks,

I'd like to make more use of rich content, like H5P on our moodle platform, but, like SCORM, the iframe nasty rears it's ugly head all too often.

On modern moodle themes (e.g. Boost), with the slide drawer and removing of blocks, there is a real problem with H5P iframes intended to fit on the screen.

Attachment 1, 2 and 3 show the problem. Basically, because 100% width is set on the iframe wrapper, the height can grow too much, causing the top and bottom of the iframe to not be visible at the same time. My screen resolution is 1920 x 1080, but have also tested this on higher and lower resolutions with the same aspect ratio.It's only if the width starts to come down, eg with both the nav drawer open and a block on screen can the iframe be dispalyed correctly.

I've made a quick and dirty fix by adding the following line to h5p.js on line 358:

    this.parentNode.style.maxWidth = ((window.innerHeight - this.parentNode.getBoundingClientRect().top - 100) * 1.8) + 'px';

This changes sets max width on the iframe wrapper. I factored in the windows inner height less top of the container after the nav bar, page hearder, etc less 100px for a bit of a boundry, then multiplied by 1.8, which seems to be the aspect ratio of the H5P presentation module.

See attachment 4 for an example.

Two issues:

* It doesnt work correctly if the window is resized vertically. I haven't quite figured out the resizing code to make ths work yet.
* max width breaks full screen. It needs to be toggled off when full screen is enabled.

I'll fool around with this some more, but through the devs might be able to get this to work faster than a spare time developer who doesn't know the nuances of the h5p codebase :)

Attachments: 
Image icon h5p1.JPG
Image icon h5p2.JPG
Image icon h5p3.JPG
Image icon h5p4.JPG
thomasmars's picture

thomasmars

Fri, 06/22/2018 - 12:06

Hi,
The iFramed H5P content will fit to whatever container it is within. If you're embedding the content you can for instance place the iFrame within a restrained div, like this:

<div style="max-width:500px;">
  <iframe src="http://localhost/mod/hvp/embed.php?id=6" 
          width="1331" height="809" frameborder="0" 
          allowfullscreen="allowfullscreen"
  ></iframe>
  <script src="http://localhost/mod/hvp/library/js/h5p-resizer.js" 
          charset="UTF-8"
  ></script>
</div>

Notice that the iFrame is wrapped in a div with max-width of 500pixels. This way the H5P will never outgrow 500px in width.

If the content is within a course or the regular content page you can use similar methods to modify it through your theme.

H5P Content is designed to fit any screen from mobile to projector sizes, so they need this responsiveness in order to fit within their use-case, the best way to contain this is through restricting the size of the parent.

Good luck, Thomas.