H5P Guides

The basics

H5P allows you to easily and quickly create rich interactive content on a web page.
This document will guide you on how to:
  • Reuse existing H5P content
  • Edit H5P content
  • Create new H5P content

To create H5P content on your own site, you must have the H5P plugin installed and enabled on your site. Plugins that support content authoring currently exist for WordPress, Drupal and Moodle. If you don't have a site set up with H5P, feel free to test drive H5P.

Reuse Existing H5P Content

See our Reuse H5P content guide

Create a new H5P Content

On your platform's admin menu select: 

  • Drupal: Add content > Interactive content
  • WordPress: H5P content > Add new
  • Moodle: Add an activity or resource > Interactive Content 

To be able to create new H5P content you need to install content types first. Below are the instructions on how to do this using the H5P Hub:

Edit H5P content on your site

After uploading existing H5P content, you may edit it using the built-in editor. 

  • Drupal: Press the Edit button on your H5P node.
  • WordPress: Press the Edit button on your H5P instance.
  • Moodle: Press the Edit/Edit Settings link next to your H5P instance.

After pressing Edit, you should see an editor like this:

Here you may edit all fields in the H5P. Saving will update the H5P as well. Use "Tutorial" and "Example" links at the top to learn more about this content type and to see some examples of usage.

The standard editor lists all fields sequentially. For advanced content, this will quickly become difficult to maintain. Extending the editor is supported through editor libraries, that may extend standard functionality (i.e. provide tabbed views of lists, etc.) or give a complete Wysiwyg editing experience. Below are quick examples of the Presentation Editor and the Interactive video editors. 

Want to learn more about creating H5P content? Take a look at the tutorials in the Content author guide.

Embed H5P Content

H5P Content created on h5p.org ( or on any other site ) can be embeded on your site. Just press "Embed" button below the content and copy the code to your site.

Below is an example how you can embed H5P content on WordPress blog post:

  1. Click on "Embed" link below the content you want to embed.
  2. Copy the code.
  3. In WordPress blog post editor swith to Textual editor and paste the code.
  4. Switch back to Visual editor to see the content you just embeded.
  5. Continue editing blog post and save as usual.