H5P Guides

Alternative way to add H5P content to Canvas

We recommended using H5P.com for Canvas. By using H5P.com the authoring experience is a lot smoother, the content is inserted right away, grades are stored in the gradebook and you can see what your users answered. Your content will be hosted by the H5P Core Team, and you also support the development of H5P.

If you don't want to use H5P.com you may choose to use H5P in Canvas by setting up your own WordPress or Drupal site and embed from that site. You can test this by using H5P.org, but we don't recommend using H5P.org for anything but trying out H5P. Also do note that with this method all your content have to be publicly available. With H5P.com you may choose to only make the content available for students within a Canvas Course.

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.