Using H5P with Canvas by Instructure
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>
<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
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.