Getting Started with H5P

Step1: Create H5P objects in Open H5P. Step 2: Embed the H5P in canvas, WordPress, Pressbooks or UBC wiki

There are two major steps to get started with H5P. First step is to create H5P interactive element using the Open UBC H5P Hub, and the next step is to share the H5P that you have created to your choice of learning technology platform (such as Canvas, UBC Blogs, PressBooks) has a Getting Started Guide which is a good place to start. The following are things to consider when you are starting to use H5P.

  • Will you using an existing interaction, modify it or create your own?
  • Explore the and other H5P object repository sites, such as eCampusOntario H5P Studio or the H5P Global OER Hub (once ready).
  • Think about how interactive media will enhance your course as far as presenting information or helping learners with formative assessments and feedback.
  • Decide on how you will be accessing H5P? What do you have available? And what meets FIPPA requirements if you are considering it for student’s use for assignment content creation?
  • Consider accessibility. If you are using an interaction that is focused on visual information, have you included that information in text or audio modes? Will the interaction type be accessible on most devices?

Step 1: Create

Note: If you are outside of UBC, you can go to H5P website to create H5P content.

  1. Click the Log In button located at the top right to login to Open H5P Hub
  2. Under UBC Faculty, select the faculty you belong to. Then click Update Profile.
  3. Go to H5P Content>Add new to create new H5P content
  4. Choose H5P content types. For more information on each content type,refer to the H5P documentation here.
  5. After you create your H5P, click create.
  6. You have create your H5P element! To share this H5P element to your choice of learning technology platform, click Embed and copy the embed code. Then move to Step2:Share.

Step 2: Share

Share to your Canvas Course

  1. Go to your Canvas Course that you want to embed the H5P element that you have created.
  2. Go to the page that you want to add your H5P element. On that page, go to View>HTML Editor to switch to HTML Editor.
  3. Paste the embed code that you have copied in Step1: Create.
  4. Click Save.

Share to your WordPress(Blogs/CMS) site

  1. Go to your WordPress(Blogs/CMS) site.
  2. Go to page/posts that you want to add your H5P element.
  3. Add Custom HTML blocks.
  4. Paste the embed code that you have copied in Step1: Create.
  5. Click Save.

Share to your PressBooks

  1. Go to the PressBook that you have created.
  2. On the page that you want to add H5P element.
  3. Click Text(HTML) to switch to HTML editor.
  4. Paste the embed code that you have copied in Step1: Create.
  5. Click Save.


You can share your H5P elements to any other learning technology platforms so long as it allows you to paste HTML/iframe code.

Reusing H5P

The simplest way to use H5P interactions, is to repurpose existing H5P interactions. The interactions can be reused by getting the embed code and using it on your course or web page. The code can be accessed by the <>Embed link on the bottom right of the interaction itself.

Page attributions:H5P Graphics by UBC (CC by 4.0). Logos displayed in the graphics are protected with trademarks. Share,pen,laptop icons used in the graphics are CC 0 license. Text on this page was adapted from the Documentation: H5P by Parm Gill, shared under a CC-BY-4.0 License.