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.
Comments
tiezbajak
Thu, 12/10/2015 - 14:05
Permalink
Full screen
How to show full screen onload and auto play.?
tiezbajak
Thu, 12/10/2015 - 14:08
Permalink
Auto play
I have installed this plugin on wordpress, and create intractive video so I want to auto play and full screen default.pleas help me.
falcon
Thu, 12/10/2015 - 15:16
Permalink
https://h5p.org/comment/3229
elivesvc
Thu, 08/18/2016 - 23:06
Permalink
H5p not defined- iframe inside third party js
Hi,
I tried to listen to xAPIevents of a H5P content iframed in my page.
But for some reason I get that H5P is not defined.
Thanks in advance for your help.
Best,
Yuvaraj.
falcon
Fri, 08/19/2016 - 09:51
Permalink
Is the H5P embedded from
Is the H5P embedded from another site? Inserted via iframe? If so it won't work :/ We will probably make alternative solutions for this later. I believe you can add the listener inside the iframe from outside the iframe if they are from the same domain, but I'm not sure.
falcon
Fri, 08/19/2016 - 09:51
Permalink
Is the H5P embedded from
Is the H5P embedded from another site? Inserted via iframe? If so it won't work :/ We will probably make alternative solutions for this later. I believe you can add the listener inside the iframe from outside the iframe if they are from the same domain, but I'm not sure.
elivesvc
Thu, 08/25/2016 - 19:34
Permalink
Got it! Thanks for your quick
Got it! Thanks for your quick reply.
chrisrebacz
Fri, 10/20/2017 - 06:42
Permalink
Firefox/Safari issues
Hello--
I have H5P content hidden in a section tag that is initially set with display hidden. When I set display: block on the section, the H5P content wouldn't appear. Followed the instructions on this page, and in Chrome the solution of adding the auto height css and triggering the resize works well. However, I'm having troubles in Firefox and Safari. In Firefox, the H5P content still won't display despite triggering the resize. In Safari, the content display but the size is really small. Refreshing the page with display block, the content appears in Firefox, and the sizing displays correctly in Safari. Any suggestions on how we can address this?
tomaj
Fri, 10/20/2017 - 13:01
Permalink
Trigger resize on iframe
It might be that your H5P content is displayed in an iframe, and that the 'resize' event isn't propagated by the main page to that iframe. I suggest try calling it on the iframe-element, and seeing if that works.
- Tom
chrisrebacz
Sat, 10/21/2017 - 20:17
Permalink
Trigger resize on iframe followup
Thank you Tom for your quick response. Calling it on the iframe definitely helped in that something began to appear. However, it doesn't resize properly to the height of the H5P content. Weirdly it resizes to a height of 150px. Here is the code I used.
I may just be doing it wrong.
thomasmars
Wed, 11/01/2017 - 13:17
Permalink
It's a bit hard to
It's a bit hard to troubleshoot this without knowing the context you're in. I would suggest looking at the embed size of your iframe and make sure it is sufficiently high. Another alternative you can look into is to make sure the 'resize' event is triggered after the content has expanded fully, e.g. after a timeout. And a third solution could be to set the height specifically to your desired pixel size, instead of setting it to auto.
codehooligans
Mon, 06/18/2018 - 02:22
Permalink
Having issues with this trigger.
Investigating an issue for client using LearnDash within a Quiz Question using a video. In LD the questions are hidden until the user clicks the start button. So I've taking the above JS provided and modified the logic to hook into the button click event. Then within that event processing call the H5P trigger to resize. But not working as expected. Also the video does show if I manually resize the viewport.
Here is the full JS code:
<script>https://monosnap.com/file/uPvjFj8R57ePRTKWe8DWu2h6RGcUOE
And here is a short video showing the viewed page. This is using Firefox on OS X with the JS console showing. But see the same using Chrome. You can see the the console log output after the 'Start Quiz' button is clicked. Then toward the end I force the resize by resizing the JS console. Then the video shows.
icc
Wed, 07/18/2018 - 09:54
Permalink
Did you manage to solve the
Did you manage to solve the issue?
Does the trigger 'resize' work if you run it form the console?
hamidme
Tue, 09/11/2018 - 16:28
Permalink
Hp5 in wordpress tabs, toggles and accordions
I need an assistance in rendering h5p contents in tab (even if involves payment). I have tried all my best as i'm not so good at javascript.
The common issue is that h5p contents will load in the active tab or accordion but won't show in other tabs (tab 2, tab 3 and so on). I know the javascript code suggested above can solve the problem but unfortunately, I don't know how to implement it. Any assistance is welcome.
Thank you!
otacke
Wed, 09/12/2018 - 09:33
Permalink
Hi Hamid!The usual cause of
Hi Hamid!
The usual cause of this phenomenon is briefly described at https://h5p.org/comment/19435#comment-19435
Without knowing which plugin you use for having the tabs, nobody will be able to tell you more than to
1) Locate the piece of code of the plugin that's triggered when you switch between tabs. It probably contains some event listener (search for onclick or something such as addEventListener('click' in the plugin's code).
2) At the end of the function that is triggered by the event listener, add
which might already be enough to do the trick.
Best,
Oliver
hamidme
Wed, 09/12/2018 - 11:37
Permalink
Hp5 in wordpress tabs, toggles and accordions
Thank you, Oliver, for the reply. I finally got where to insert the code in the plugin and everything now alright!
The solution is as follows
The plugin: Tabs Responsive plugin
The file path: template/content.php
Steps: Go to the "script" section of the code (starts at LINE 126 and ends at LINE 154)
The h5p resizing code
was inserted at LINE 147 inside the innermost jquery function.
otacke
Wed, 09/12/2018 - 11:10
Permalink
Hi Hamid!Glad I could help
Hi Hamid!
Glad I could help!
Since this question is kind of common, it would be great for the community if you stated the tab plugin that you're using and briefly described your solution.
Best,
Oliver
hamidme
Wed, 09/12/2018 - 11:34
Permalink
Hi Oliver,I have edited my
Hi Oliver,
I have edited my reply above to include the solution.
otacke
Wed, 09/12/2018 - 11:38
Permalink
Thumbs up!
Thumbs up!
preen
Sat, 12/14/2019 - 15:37
Permalink
Problem using shortcode in Wordpress
I have a similar problem with the accordion in shortcodes after an automatic upgrade. The Memory Games shows up, but the other H5P activities don't. However, if I resize the browser they appear.
https://www.esleschool.com/a1-body-and-face-vocabulary/
If I use horizontal tabs, no problems. Any solutions out there?
BV52
Mon, 12/16/2019 - 17:39
Permalink
Hi preen,Quick tip post your
Hi preen,
Quick tip post your question in the forums so that more people will see it. For your specific concern I suggest to post it in the Bugs in Content Types and provide as much information that is asked.
-BV
kairob
Mon, 12/13/2021 - 18:14
Permalink
does anyone know a solution
does anyone know a solution for this problem?
kairob
Mon, 12/13/2021 - 18:35
Permalink
h5p element only displays when resizing
karenhu79
Thu, 05/07/2020 - 02:18
Permalink
please help
can you show how exactly we can solve this from our end?
BV52
Thu, 05/07/2020 - 18:29
Permalink
Hi karenhu79,This is quite a
Hi karenhu79,
This is quite a long thread so I'm not sure what exactly you need help with. Also I suggest that you post questions in the forums since it has more traffic than the documentation pages such as this. Forums also have greater flexibility such as attaching contents, images etc.
-BV