H5P Virtual Tour (360)

About virtual tour (360)

360 (equirectangular) and normal images may be enriched with interactivities like explanations, videos, sounds, and interactive questions. The images may also be linked together to give the user an impression of moving between environments or between different viewpoints within the same environment.

This content type may be used to give a feeling of exploring and learning within a realistic environment. It includes an easy to use drag and drop authoring widget making it easy for everyone to create their own virtual tours.


The following H5P content types may be added to a Virtual Tour Scene:

  • Text
  • Image
  • Sound (both for the entire Virtual Tour, per room/scene and as buttons in the scenes.
  • Video
  • Single Choice Set
  • Interactive Summary
  • Connections to other scenes

Note: In terms of the video format, H5P accepts MP4 and Youtube videos. For audio, H5P works with MP3 and WAV. If needed, you can use the free online converter to convert your files to the desired format. 

This tool is not limited to 360 images, you can use it also to navigate through static image scenes as well.

Use cases

Virtual Tour (360) can be used to create inventory mapping of a medical center, a clinical lab, a main lobby, an ICU, an operating room, and any doctor's office. The virtual tour created can be used to demonstrate the potential hazards, safety policies, and available instruments within the virtual room. 

The viewer can click and drag the mouse over the image to rotate through rooms where each part of the room is explained in detail using text or images and videos.


Create Virtual Tour (360) H5P interactive content

Creating new H5P content is a multi-step process. H5P activities are managed through a Content Bank – an area where H5P content may be created, edited and stored. Once an activity has been created in the content bank, it can be added to your course and the activity settings can be configured as needed. 

  1. Open the CLE (cle.ucsf.edu) 
  2. Go to the CLE course where you would like to add the activity and turn Edit mode on. 
  3. Navigate to the content bank in your course to create interactive content and visit the H5P virtual tour tutorial to learn how virtual tours work.    
  4. Once your activity has been created, navigate to the section where the activity should be located. 
  5. Click add an activity or resource to add an H5P activity to your course. 
You can combine H5P content into other activities or resources in the CLE such as a Page, Lesson, or Book. Review Embed H5P into other activities in the CLE for more information and instructions.

Additional resources:

Was this topic helpful?

Have more questions? Contact us