H5P plugin compatibility with WP Mobile Pack

[DelphyB]

Hi, We're testing WP Mobile Pack for some courses online to increase learning purpose for our students. You can watch an example here : http://histologie.univ-nantes.fr. We're using H5P plugin for interactive content. It's very powerful and supposed to be already REST API. Nevertheless it doesn't work with WP Mobile Pack. Happen to know why?

Thank you in advance for any help.

[anghelalexandra]

Hi there,

The short answer is that the H5P plugin widgets are not compatible with Single Page Applications (Angular, React, Vue.js, etc.) like the one used in WP Mobile Pack.

The longer explanation:

The content for the posts and pages is filtered by this file: https://github.com/appticles/wordpress-mobile-pack/blob/master/inc/class-wmp-formatter.php

If you take a look at the source, you'll see that it allows iframes from origins like youtube.com, maps.google.com and so on. I just did a test with the H5P plugin and here is the iframe code that is inserted in the post content:

<div class="h5p-iframe-wrapper"><iframe id="h5p-iframe-1" class="h5p-iframe" data-content-id="1" style="height:1px" src="about:blank" frameBorder="0" scrolling="no"></iframe>

As you can see, there is no src attribute. Even if this code is exported by the REST API, it requires additional JavaScript & CSS files to actually render something.

The issue is that a JavaScript Angular application like the one used by WP Mobile Pack can't execute other JavaScript code, so widgets such as these are not compatible with Single Page Applications.

[DelphyB]

Thank you Alexandra, Well... I'll search another plugin then to replace H5P because we want to test WP Mobile Pack for now. I'll tell you ;)

[anghelalexandra]

Alright, thanks :)