H5P Errors in Canvas Catalog

Our team has been investigating from H5P errors in Canvas catalog. 

The error we are encountering is that when switching to the full screen version of the slide player it does not currently configure to full screen correctly (typically it takes up the top half of the screen and stretches so that the content is unreadable).

We’ve noticed this error in the following scenarios:

  1. On multiple computers both Mac and PC - typically only in Catalog, not in Canvas

  2. On both our Pharm Sci hosted H5P instance (the second item on each page) and the UBC hosted H5P instance (the first item on each page)

  3. In Chrome, but not Firefox 

We have determined it is likely related to the timing of loading assets onto the page. A potential work around is to explicitly load the h5p-resizer.js script by adding the following script tag after the iframe tags of the H5P objects, for example:

<script src="https://apps.pharmacy.ubc.ca/educontent/sites/all/modules/h5p/library/js..." charset="UTF-8"></script>

However, Canvas does not allow us to save this, as the editor filters these kinds of tags. 

We are wondering if your team has any suggestions for potential work arounds. In the meanwhile, we will be loading this type of content in a new page, rather than embedding via iFrame


1. Open a Canvas course with an embedded iFrame and click the [Full Screen] icon on the slideshow, click through the slides
2. Determine whether any of the slides are just visible in the top half of the screen or if any of the content is distorted

BV52's picture

Hi Ellie,

Are you hosting your contents in H5P.com?


Hi BV,

This is via iFrame in https://ubccpe.instructure.com/



BV52's picture

Hi Ellie,

Yes, I understand that you are inserting the content inside Canvas using the embed code but where are you hosting them? Canvas does not have a built in H5P editor so either you have an H5P.com license or you are hosting them somewhere else i.e. H5P.org. The reason I'm asking is that H5P.com have a dedicated support so that I can refer you to them if needed. 


I believe the files are hosted on their own server. Not in Canvas or h5p.com.

I believe the files are hosted on their own server. Not in Canvas or h5p.com.


Do we have any updates on support for this bug?



otacke's picture


I just read the description of the issue, and this does not sound like a bug. I'd like to refer to https://snordian.de/2023/09/30/what-is-it-with-h5p-and-this-resizing/ which describes how resizing of H5P content works and why the resizer script is essential. If you cannot include it alongside the iframe tag in HTML input fields as it gets filtered out afterwards, the admin of the site will need to add the resizer script to pages that hold H5P in a different way (potentially unconditionally).