Embedding H5P in Moodle

Why?

Students learn best through active engagement with subject material, alongside opportunities for evaluating information, applying knowledge, and creating. H5P empowers educators to craft these types of engaging learning experiences quickly and effectively. 

The capability of H5P to be embedded into HTML fields makes it possible to integrate these interactive elements seamlessly into diverse educational assets, such as Text and Media areas, Moodle Pages and Books, which enhances the learning environment.

How?

This article assumes that you have already created a standalone H5P activity and now want to embed it within a Moodle book resource. You can embed an H5P activity anywhere in Moodle you would normally edit text or HTML, i.e., via the text editor.

To embed an H5P activity within Moodle (e.g., in a Book or Page resource):

1. Ensure Edit mode is on.
   
2. Navigate to the appropriate H5P activity that you wish to embed.
   
   Note: A good practice is to add embedded activities to the bottom of the relevant section in your subject site.
3. Click the Edit button for the activity, then select Edit settings from the dropdown menu.
   
4. In the Display Options section, click to enable the Display action bar and frame and Embed button options.
   
5. Click the Save and Display button.
6. The action bar will now be displayed at the bottom of the H5P activity when opened. Click the < > Embed button.
   
7. From the Embed pop-up window, highlight and copy the embed code.
8. Navigate to where you would like to embed the H5P activity in your subject site.
   
   Note: H5P activities can be embedded anywhere you can access the text editor.
9. Using the Atto editor, click Show more buttons and then click the HTML button.
   
10. Paste the embed code copied from the H5P activity into the appropriate location on the page.
11. Click the Save and display button to view the embedded H5P activity.

Best practice

To ensure the H5P activity is only viewable where it is embedded, navigate back into the H5P activity settings and update the following:

1. In the Groups and visibility section, select Make available but not shown on site page from the Availability dropdown.
2. In the Display Options section within the settings page, disable the Display action bar and frame checkbox.
3. Click the Save and return to site button.