Adding H5P Interactive Content through the eClass Editor

Article Last Updated September 2021

 (H5P) activities are interactive learning objects based on a set of open-source templates that instructors can add into their courses (the name is an abbreviation for HTML5 Package). Any pre-existing H5P activities created and/or hosted on or may be embedded into courses to provide interactivity in eClass. This can be accomplished by either linking the URL or by uploading the file anywhere where the standard editor is available (labels, pages, content section headers, etc.)

New in June 2021, these activities can also be pulled from the course Content bank, either by linking or copying. Note: H5P activities added through the eClass editor cannot send grades to the eClass gradebook; if this is required, instructors can use the new H5P activity type.

There are two ways to add H5P content to your course.

Method 1 - From within any content editor showing the  button

Method 1.a - Entering a URL from an external H5P site:

1. Copy the HP5 URL from a website.
2. Where you want to add the interactive content, access the in-system editor and click the  button:

3. Paste it into the URL or embed code" box.

4. Expand the H5P options if necessary to allow downloading, embedding, or to add a copyright button.
5. Click Insert H5P at the bottom.

Method 1.b - Upload an H5P file:

1. Download an H5P file to your local computer (from or
2. Access the editor as above and click the  button.
3. Click Browse repositories... to go to the File picker.

4. Select "Upload a file". Click Choose File, locate, and attach your H5P file.
5. Click Upload this file.
6. Set any H5P options if necessary.
7. Click Insert H5P.


Method 1.c - Pull content from the course Content Bank (new in June 2021):

1. Access the editor as above and click the  button.
3. Click Browse repositories... to go to the File picker.


4. Select Content Bank.
5. Select the desired content and click on it to open the h5p package information overlay.
6. Then select whether to link or make a copy of the file (copied files will not contain any changes made to the content); change the file name, author information, or the license information if required.
7. Set any H5P options if necessary.
8. Click Insert H5P.

Note: The H5P content type libraries are updated regularly but newer activities created on or .com may have issues when added by instructors. Please contact eClass support if you have issues with an incompatible H5P format.

Method 2 - H5P course filter

The H5P course filter is on by default allowing you to paste the URL of an H5P site into an eClass content area and it will automatically display the H5P activity. You can toggle the H5P course filter by:

  1. Going to your Course administration settings.
  2. Click Filters.
  3. Set Display H5P to On.
  4. Click Save changes at the bottom to ensure this takes effect.

Now, when you paste an H5P URL into your content, saving will automatically convert to display the H5P activity.

The H5P activity is now shown in your content.


Note: Please ensure that you have copied the proper URL to the H5P activity if using this method. Sometimes, it is not merely the URL in the address bar. The correct URL's are typically found in the sharing options of the activity to where you found your resource.

For example, the activity below has it's own sharing options:


Related Articles:

Preparing and Adding Content to eClass


(0 vote(s))
Not helpful

Comments (0)