H5P content can be used and reused on many types of websites. In this short video we will demonstrate how to use the embed code for H5P content, and publish it in a WordPress post, as well as a page in the Canvas LMS.
Find Content
- Visit the web page with the H5P content you would like to use. Visit our Resource page for links to content examples.
- In the lower left corner of the content, click the <> Embed button.
- An Embed pop-up window will appear. Highlight the code (it will start with “<iframe”), and then press either Control-c (Windows) or Command-c (Mac), to copy it.
Embed H5P Content in WordPress
- Now visit your WordPress site. Login and either start a new post, or edit an existing one.
- In the post editor, add a new block by clicking on the plus button, or typing /ht – the Custom HTML block should be the top choice.
- Paste the code that you copied earlier into the field that says “Write HTML…“
- Now you can further edit the post if you need to and then publish it when you’re done.
- View the post and you should see the H5P content.
Embed H5P Content in Canvas
- Navigate to your Canvas course and edit a page where you would like your H5P content to appear.
- Look for the code editor button (</>) in the lower right of the editor. Click it to edit the HTML on the page.
- Paste the code that you copied earlier into the field.
- Now you can further edit the page if you need to and then publish it when you’re done.
- View the page and you should see the H5P content.
If you’re looking for more H5P content you can visit our Resources page and look for the content examples.
Photo by Rutpratheep Nilpechr on Unsplash
