Adding a H5P activity to Moodle can be completed by simply creating the activity as a resource and placing it in the right order in the list of resources under a section.

 

Of course, this is fine to use it this way. But you can also be a little bit creative and embed the H5P object inside a Moodle page by using the embed code.

This means creating the H5P activity then using the embed option.

When you view the activity you can select embed in the bottom left corner.

Now go to your normal Moodle content page.

The embed code can be pasted into your Moodle pages inline with the other content that you have in your page using the HTML code option “</>” icon in the Page content editor. 

 

This puts the activity in context with the content. 

There are a few issues though.

If you prefer to change the width and height of the embedded H5P object to 100%, then it can be problematic when viewed using IE or Edge. It can appear with a cut down height.

In some cases, especially for mobile devices, it can be impractical to use this method.

One option is to follow these instructions to make the the iframe and H5P container responsive.

https://benmarshall.me/responsive-iframes/

On the other hand, if you leave it at a set height then it may scale down in some browsers or will allow you to scroll right to view the complete H5P content.

As you will probably want to make this work in all browsers, I would suggest you take notice of the extra resizing code to make sure it works in your students environment.

If you have any thoughts, suggestion or solutions for the IE/Edge issues, please let me know.