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>
<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.