Automatic resizing of H5Ps – H5P

By default, an H5P displays at its maximum possible width and height. However, when the available space is reduced, the H5P should dynamically adjust its size.

Under normal circumstances, the H5P should resize accordingly to the space available. However, there are several scenarios where a content type may need specific adjustments:

Inside H5P.com.
Iframe embed of H5P content.
LTI embed of H5P content.
Fixing wrong resizing of H5Ps.

Inside H5P.com

You can test resizing by opening an H5P on H5P.com and adjusting your browser size or by viewing it on a mobile device.

For example, here's what an H5P looks like in its full size (1090x691 px):

Here's the same H5P in a more limited space (509x400 px). As you can see it is dynamically resized:

Iframe embed of H5P content

When sharing an H5P on a different platform using the iframe embed code, a resize script should be attached to the H5P. This script enables the H5P to change its size based on the available space.

Here's what an iframe code looks like with the resize script (marked in bold at the end):

LTI embed of H5P content

After completing an LTI integration with your preferred LMS, you will be able to insert H5Ps that dynamically resize. The resize script should run by default.

Fixing wrong resizing of H5Ps

Sometimes an H5P does not resize correctly after being embedded on another platform, affecting both iframe and LTI embeds.

If your H5Ps are displaying unexpectedly, there are some things you can try to do;

Confirm that the resize script is attached to the H5P.

If this is the case, reinsert the embed code, ensuring the complete code, including the resize script (<script src="https://yourorganization.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>).

Theming of the platform must be changed.

If the content is still not resizing, your platform may be stripping away the script. You might be able to change the theme settings on your platform to allow the resize script to run in the background.

Here are a few examples of how to add a resize script to a platform's theme: Brightspace Setup dynamic resizing of H5Ps, Canvas Add a resize script, and Moodle Automatic resizing of H5Ps.

After confirming the possibility of changing your platform's theme, choose either the resize script for iframe-embedded content or the resize script for LTI-embedded content:

Public Embed Script

var h5pScript = document.createElement('script');
h5pScript.setAttribute('charset', 'UTF-8');
h5pScript.setAttribute('src', 'https://h5p.com/js/h5p-resizer.js');
document.body.appendChild(h5pScript);

LTI Script:

var h5pScript=document.createElement('script');
h5pScript.setAttribute('charset','UTF-8');
h5pScript.setAttribute('src','https://h5p.com/canvas-resizer.js');
document.body.appendChild(h5pScript);

Your platform supports third-party scripts.

Due to potential security risks, some platforms may not allow third-party scripts to run. If this is the case, we cannot guarantee the H5P will display correctly. We recommend reaching out to your platform administrators for further assistance.