Embedding H5P Content Into Canvas

Casey Shew Updated by Casey Shew

After ensuring all of your settings are correct, save and publish your content in H5P.

Over in Canvas, click the Edit button on any page which you'd like to add H5P to. In the page editor, click the plug icon in the rich content editor to see all of the LTI tools available. Click on H5P from here.

This should pop up a modal window with your H5P account and all of the content you have available to you there. If not, you may need to log into ecornell.h5p.com, log in, then try again.

From this window, search for or navigate to the content you'd like to embed on this page, click on it, and then click the "Insert" button to embed it on the Canvas page.

You'll then see the H5P content in the page editor. Don't bother adjusting the height attribute in the HTML - that's usually dynamic as a result of embedding via LTI. However, you may wish to adjust the width attribute if you'd like the content to be wider on the page. Save the page.

Embedding the content this way, as opposed to through pasting the iframe link into the HTML editor of the page in Canvas, will make it so that the height of the content in Canvas is responsive, which is especially nifty for things that adjust in height through interaction like accordians. It's also a slightly easier way to embed in general.

You will notice there is an "Edit" button on the iframe when embedding this way. Don't worry, this isn't visible to students. You can check through the simulated "Student View" in Canvas if you'd like to verify this.
When embedding this way, which is the preferred method, you can not simply copy and paste the resulting page html from one page to another. If you do that, the iframe src will be pointing to the original course ID and students will not be able to see it. Importing/copying the page using Canvas's native import/export/copy functionality is perfectly alright though.

If you are concerned you may have copied the HTML inadvertantly, go into student view and if the H5P embed loads then it's fine. If you get a permission error in student view, you need to fix it following the steps in this article: Troubleshooting H5P Elements in Canvas

How did we do?

Modifying Subtitles in H5P Interactive Videos

Troubleshooting H5P Elements in Canvas

Contact