otacke

PLEASE NOTE: I gave some of my free time to create this plugin. Using it and its source code is absolutely free. I don’t want any money from you. However, if you like this plugin, I kindly ask you to make a one-time donation of 2.50 EUR to the Rainforest Coalition (https://www.rainforestcoalition.org/donate) — or more if you can afford to.
H5P is a versatile plugin to add interactive content to your website. You may try to run it inside some fields that are created by other plugins, e.g. inside tabs, accordions, lightboxes, etc. And with some of them it seems that H5P doesn’t work although it is, but the content is set to a height of 0 pixels. That problem is described at https://h5p.org/manipulating-h5p-with-javascript.
The best solution would be to modify the plugin that’s including tabs, etc. to your WordPress site, but that’s not always possible. In some cases, this plugin may be a feasible workaround at least.
In “observer” mode, it will try to add a so called ResizeObserver to the container that holds the iframe with H5P content. That observer will send a resize pulse whenever the container changes in size, e.g. when it becomes visible. This should be a safe option just taking some extra resources.
In “interval” mode, it will trigger H5P to resize in regular intervals which should let it be displayed in many cases. However, if they appear too frequent, they may cause the browser to stall. Choose the time interval wisely! Also, some H5P content types may break that way. The only way around this is then the “selector” mode.
In “selector” mode, you need to determine a CSS selector that will identify all the elements that you interact with to display other contents, e.g. the tab buttons. If that selector is set in the plugin’s settings, it will trigger a resize pulse when that element is clicked. This way, you prevent stalling the browser or breaking H5P content types. Depending on how the other plugin was created, there may not ba a suitable CSS selector then.
If necessary, you can use the manage_h5presizepulse_options capability to control access to the plugin settings.
PLEASE NOTE: H5P IS A REGISTERED TRADEMARK OF H5P GROUP. THIS PLUGIN WAS NEITHER CREATED BY H5P GROUP NOR IS IT ENDORSED BY THEM.

SNORDIAN's H5P Resize Pulse

Provides you with a potential workaround for H5P content that won't show in tabs, accordions, lightboxes, etc.

IndiEgg Studios

Nest Frontend Editor for H5P lets your users view, create, and edit H5P content without ever leaving the front end of your WordPress site.
Place the shortcodes on any pages you choose, configure permissions per role, and let the plugin handle the rest. Works seamlessly with Remix Manager for H5P when its Library Link Behavior settings point to Nest front-end pages.
Shortcodes:
<ul>
<li><code>[nest_h5p_editor_view]</code> – Displays an H5P content item. Reads the item ID from the URL (<code>?h5p_id=X</code>).</li>
<li><code>[nest_h5p_editor_create]</code> – Displays the H5P content creation editor.</li>
<li><code>[nest_h5p_editor_edit]</code> – Displays the H5P content editor for an existing item. Reads the item ID from the URL (<code>?h5p_id=X</code>). Users may only edit content they own.</li>
<li><code>[nest_h5p_editor_results]</code> – Displays the H5P results page for an existing item. Reads the item ID from the URL (<code>?h5p_id=X</code>).</li>
<li><code>[nest_h5p_editor_link_view]</code> – Outputs a link to the front-end view page for the current H5P item. Accepts <code>text</code> and <code>class</code> attributes.</li>
<li><code>[nest_h5p_editor_link_edit]</code> – Outputs a link to the front-end edit page for the current H5P item. Only renders if the current user owns the content. Accepts <code>text</code> and <code>class</code> attributes.</li>
<li><code>[nest_h5p_editor_link_results]</code> – Outputs a link to the front-end results page for the current H5P item. Accepts <code>text</code> and <code>class</code> attributes.</li>
</ul>
Features:
<ul>
<li>Role-based permissions – all roles registered on the site are listed, including custom roles like Teacher or Instructor.</li>
<li>Configurable unauthorized redirect behavior per action – redirect to home, login, or a custom URL.</li>
<li>Logged-out users are always redirected to the login page.</li>
<li>Auto-resizing iframes that adjust to content height on load, on user interaction, and after content type selection on the create page.</li>
<li>Admin menu, admin bar, and footer are automatically hidden inside the iframe so users see a clean, focused experience with no WordPress admin UI visible.</li>
<li>Ownership enforcement for the Edit shortcode – users can only edit H5P content they own.</li>
<li>Results shortcode – display H5P results on the front end with role-based permission control.</li>
<li>Link shortcodes – generate styled links between view, edit, and results pages for the current H5P item.</li>
<li>Filter hooks (<code>rmh5p_view_url</code>, <code>rmh5p_edit_url</code>, <code>rmh5p_create_url</code>, <code>rmh5p_results_url</code>) integrate with Remix Manager for H5P when its Library Link Behavior settings point to Nest front-end pages.</li>
</ul>
For full documentation visit <a href="https://indiegg.com/nest-frontend-editor-for-h5p/documentation" rel="nofollow ugc">indiegg.com/nest-frontend-editor-for-h5p/documentation</a>.
Disclaimer:
Nest Frontend Editor for H5P is an independent plugin and is not affiliated with, endorsed by, or sponsored by H5P or its developer, Joubel. H5P is a trademark of its respective owner.
<h3>Usage</h3>
<h4>Setting up pages</h4>
Create one page per action. Add the shortcode to each:
<ul>
<li>View page: <code>[nest_h5p_editor_view]</code></li>
<li>Create page: <code>[nest_h5p_editor_create]</code></li>
<li>Edit page: <code>[nest_h5p_editor_edit]</code></li>
<li>Results page: <code>[nest_h5p_editor_results]</code></li>
</ul>
Then go to Settings -> Nest Frontend Editor for H5P and select each page from the dropdowns.
<h4>Permissions</h4>
Under Role Permissions, check which roles can access each action. All roles on the site are listed automatically, including custom roles.
<h4>Redirect behavior</h4>
Under Unauthorized Redirect Behavior, choose what happens when a logged-in user without permission tries to access each page. Options are:
<ul>
<li>Redirect to home page</li>
<li>Redirect to login page</li>
<li>Redirect to a custom URL</li>
</ul>
Logged-out users are always sent to the login page regardless of this setting.
<h4>Integration with Remix Manager for H5P</h4>
When both plugins are active and pages are configured, the Remix Manager Library Link Behavior settings can point View, Edit, and Results links to the matching Nest Frontend Editor for H5P pages.
<h4>Link shortcodes</h4>
Place these shortcodes on your view, edit, or results pages to generate navigation links between pages for the same H5P item. All three read the current <code>h5p_id</code> from the URL automatically.
<ul>
<li><code>[nest_h5p_editor_link_view]</code> – link to the view page</li>
<li><code>[nest_h5p_editor_link_edit]</code> – link to the edit page (only renders if the current user owns the content)</li>
<li><code>[nest_h5p_editor_link_results]</code> – link to the results page</li>
</ul>
All three accept optional attributes:
<ul>
<li><code>text</code> – the link label. Example: <code>[nest_h5p_editor_link_view text="Watch this activity"]</code></li>
<li><code>class</code> – additional CSS classes. Example: <code>[nest_h5p_editor_link_edit class="button button-primary"]</code></li>
</ul>
Each link always includes the classes <code>nfeh5p-link</code> and a type-specific class (<code>nfeh5p-link-view</code>, <code>nfeh5p-link-edit</code>, <code>nfeh5p-link-results</code>) for styling in your theme CSS.

Nest Frontend Editor for H5P

Provides front-end view, create, edit, and results pages for H5P content via shortcodes, with role-based permissions.

SNORDIAN's H5P Resize Pulse vs Nest Frontend Editor for H5P