interactive videos

H5P for Beginners- Interactive Videos made Easy!

Create Interactive Videos with H5P tool using the simple guide here

We are going to see, in brief, how you can create a fun and interactive video for eLearning using H5P.

There are two basic prerequisites you need before you begin to make a video.

They are:

  1. Make sure H5P is installed. Then give it a test run to see whether it is compatible with your platform.
  2. Also, make sure that the platform you are using be it Drupal and WordPress, supports interactive videos.


Now follow these 8 steps to create your very own video tutorial with interactions.

Step.1 Get the right video format

  • To make a video interactive, you first need a video. A .mp4 format works best for most browsers.
  • If it is a .webm file, you can convert it using the open-source converter “Miro”.
  • Providing an alternate video, possibly in .webm will also be helpful for some.

Note- To avoid copyright issues, make sure that you have an appropriate license for the video

Step.2 Create a file

  • Go to where you usually create new content on your platform.
  • For example, in WordPress go to H5P Content> Add New> Create> Interactive (in Content Types)


Step.3 Open the Interactive Video Editor

  • When you open the video editor, you will see three tabs on the top: Upload Video, Add Interactions and Summary Task.
  • Click on the first tab ‘Upload Video’ and choose the desired video from your downloaded files.


  • You can add copyright information by clicking on the ‘Edit Copyright’ button.


Step.4 Add Interactions

Note- Buttons with blue background are for adding text interactions, green is for multimedia and gray is for quiz interactions.

  • Click on the ‘Add Interactions’ tab at the top of the video editor.
  • A tool-bar will appear above the video.h5p toolbar


Step.5 To add Text Interactions

  • Add text boxes to your video by clicking on ‘T’ from the tool-bar. Drag it to the video.
  • You can choose the video to either continue playing or pause when the text box appears on the screen.
  • Choose the start and end time for the text to appear.
  • In the text field, write the information and then give a label to it.


Step.6 To add Image Interactions

  • Drag the image icon from the tool-bar to the video, exactly the same way as text.
  • You will have to specify the start and end time of appearance of the image.
  • Select whether you want to pause the ongoing video or continue playing in the background.
  • Add the same text to the ‘alt-text’ and ‘hover text’ fields in the window that appears.

Note- Remember to use valid licenses if you do not originally own the multimedia

Step.7 Add Bookmarks

Bookmarks are used to indicate the time frames where a new topic or interaction appears

  • Head back to ‘Add Interactions’
  • The bookmark icon is right next to the “play” button on the toolbar
  • A blue dot appears at every point where you have added a bookmark.


Step.8 In the final step

  • View the finished product and make any necessary changes.
  • Save the note or article.


To wrap up…
we have covered all the essentials in short, but if you need a more detailed view of the process you can refer to H5P’s very own tutorial on how to make a video interactive.

If you found this guide helpful, we would love to see your feedback in the Comments section!
If you would like to contribute to our blog, contact us at



1 thought on “H5P for Beginners- Interactive Videos made Easy!”

Leave a Comment

Your email address will not be published. Required fields are marked *

What if designing Home Pages was easy? Try RemUI Page Builder Now

Check Out Our New And Improved Page Builder Now!

remui moodle theme prebuilt layouts

                          What is new?

  • Drag-and-drop functionality for seamless page building.
  • No coding is required.
  • 80+ pre-designed templates and many more!!

Choose your currency:

Converted prices are for reference only - all orders are charged in $ US Dollars ($) USD.
  • USDUS Dollars ($)
  • INRIndian Rupee (₹)
  1. Spin The Wheel Early Bird Giveaway!Spin the wheel Early Bird Giveaway Details - 
    1. Sign up & spin the wheel to get up to a 30% discount.
    2. The discount is only applicable to Edwiser Page Builder. 
    3. Page Builder is available for RemUI Pro & CCS only.
    4. Please provide a valid email address as the coupon code will be shared with you via the email you have provided. 
    5. The coupon code can be used at checkout and is only valid for the first 50 customers.
    a valid email id since the coupon will be shared with you only via email
  2. Coupon code can be used at checkout and is valid only for 24Hrs

Sign up to Spin the Wheel

Spin the Wheel
By joining this giveaway, you would give us your consent to occasionally send you emails about products and strategies that would benefit your Moodle LMS.