H5P Guides

Display H5Ps with 3rd-party JavaScript

Sometimes people wish to put H5P content inside a container that uses 3rd-party JavaScript, e.g. inside an accordion or a lightbox.

The problem that arises is that the container the H5P is inserted into often is hidden, or otherwise not visible. This means that the H5Ps get no size when they're initialized. In order to solve this issue, we'll have to hook into the JavaScript that hides and shows the H5Ps, and make them resize the H5P content inside.

We'll have to add a custom JavaScript, either to our theme or a custom mods plugin we have in our CMS. If we're using jQuery UI's accordion this custom JS will have to look something like this:

(function ($) {
  $(document).ready(function () {
    // Using setTimeout to run after other ready callbacks
    setTimeout(function () {

      // Listen for event triggered when changing "panels" in the accordion.
      $('.ui-accordion').on('accordionactivate', function (event, ui) {

        // Make sure the panel has automatic height
        ui.newPanel.css('height', 'auto');

        // Triggering a resize event on the window will make H5Ps resize.
        H5P.jQuery(window).trigger('resize');
      });
    }, 0);
  });
})(jQuery); // Same jQuery version as jQuery UI

 

Another way of solving issues like this could be to make an H5P library out of the 3rd-party JavaScript you're using.