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

Steps:

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