Question about Embed SRC formation

SteelWagstaff's picture

Hi all,

I've recently been working on some code additions to which would allow users to embed H5P activities in the annotation pane. The way I'm doing this currently is writing a javascript function which will detect (based on the URL for a published H5P activity) whether or not a link is an H5P activity and then outputting an iFrame. While I can write an indexOf call that will detect the pattern used for H5P activities on my particular WP installation, I don't know how H5P activities are published in other contexts and was wondering if someone could explain for me how H5P activities are published and the rules around URL production in all possible situations. For example, H5P activities published via the WordPress plugin seem to have "admin-ajax.php?action=h5p_embed&id=#" in their iframe src string, and the H5P activities you have embedded on this site seem to have "h5p/embed/#" in their src string. Is there a specific, recognizable pattern for H5P activities published via Drupal, or in Moodle, or elsewhere? Sorry if any of this is confusing--I'd be happy to schedule a quick call and do some screensharing if a demonstration/explanation would be more helpful. 

fnoks's picture


AFAIK embedding is only supported by the WordPress and Drupal plugins. Since each platform has it's own way of creating URLs/endpoints your approach of testing for different platform-specific patterns is the only way of achieving this. It seems you already have identified the two patterns:

  • WordPress: admin-ajax.php?action=h5p_embed&id=#  
  • Drupal: h5p/embed/#

I am not familiar with - it would be cool to see how it looks when using H5P :)

SteelWagstaff's picture

Thanks for the quick and helpful reply. is a web annotation tool we're quite excited about. I've only got something working in a dev environment right now with H5P & together (it's still a little while from being production ready), but here's how a sample H5P activity would look inside of the annotation pane on a sample website: h5p & demo


fnoks's picture

That looks really cool :) Let us know when you have something more production ready - would be great to test this out!

SteelWagstaff's picture

I've just written up and filed a GitHub issue on the client page here which I think can be the starting place for a discussion about what we're hoping to do: