H5P Guides

Using H5P with Canvas by Instructure

This short guide is meant to help you get started embedding H5P Content into your Canvas LMS.

H5P Content is embedded in the same manner as a YouTube Video, you place an iframe code where you want the H5P or video to appear. E.g.

<iframe src="https://h5p.org/h5p/embed/707" width="1090" height="361" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

What makes H5P Content different from a YT Video is that the H5P Content usually don't have a static width to height ratio like a video does. This means that H5P Content may change height as you interact with them. This is a problem since one of the limitations with using an iframe is that it won't adjust to the size of its content, it will show scrollbars or hide the content which overflows. To overcome this limitation we need to include small JavaScript on the embedders page. This script will safely communicate with the content inside the iframe and make sure that the iframe's size matches that of the content. Typically this script will be included at the bottom of the body tag, looking like this:

<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

Usually, including this script will require you to make changes to the code of your web system, which you'll also have to maintain as you upgrade the system. However, in Canvas LMS there's no need for that as they've added an option where you can specify a custom JavaScript to include.

Start by going to your account or subaccount settings in Canvas, and then finding the Global JavaScript URL option. The location of this option may vary depending on the version of Canvas. Enter the script URL found in the embed dialog on the page which you are embedding from.

If this option already specifies another script you should include the resizer scripts in that, or make a custom .js file where you include all your JavaScripts. The code for including the resizer using another script looks like this:

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

Remember to replace the URL with that of the site from which you are embedding. 

Then make your H5P learning object with your H5P account and copy the embed URL, leaving off the script part at the end. 

In Canvas, you can place your H5P learning object in the modules or within a page or assignment. 

Place H5P on a page or assignment

Click the plus under the assignments tab to add a new assignment or click the plus under the pages tab to add a new page.

Title your page or assignment, and click the HTML Editor link.

Paste in the embed code you copied above (removing the script tags at the end). 

 

Click the “Rich Content Editor” link to switch back to the page editing mode and add any text directions above your embedded content. Be sure to click the blue save button when you are done. 

You will now see your H5P element embedded in your page. Some browsers may block mixed content, so you may have to choose to “load unsafe script” to see your content. 

Add H5P to your modules

From the Modules Page, click the plus to add a new element to your modules.

 

Select External URL and paste in the embed URL.

 

Your new link will now appear in your Modules list. Click it to check your content.

Your H5P content will appear in the full window with the next and previous arrows for the module workflow below.

 


Thanks to community member mlattke for the contribution of this guide.

    Attachments: