Using JavaScript to Resize H5P activities in Canvas

paradisojr's picture


Problem: I need embedded H5P activities (in Canvas LMS) to resize on students' mobile devices.

Solution: I'm aware of the Global JavaScript URL option, but that was not approved for reasons of security among others, so a colleague mentioned I might look into self-hosting the JS (and even provided me the script). Great! ( theory).

My question: After adding that JS to our top-level Canvas instance, how can I assure that all the H5P content that has been and will be embedded into a variety of Pages et al. (in an innumerable amount of Canvas courses across the university) will actually abide by (communicate with) that script? (I don't imagine it would automatically happen, but I honestly don't know.) 

Any insight(s) would be greatly appreciated!



thomasmars's picture

Hi, whenever you embed an H5P you would have to add that script as well on that page, by changing the external URL with your internal URL for the script.
If you want this to happen automatically so users that embed content does not have to think about adding the script I suppose you could load the script for all pages that you're sure is using H5Ps or through your theme, but adding this on all pages will have some performance overhead. Consult Canvas guidelines for how to include scripts on multiple pages.

We're also currently working on an alternative for sites that does not support the native H5P plugin, for these sites you can get content through LTI to for instance Canvas. This is not done yet, but you can see for more information on the progress.