Sudden problem displaying H5P content on Wordpress
Submitted by neil_mcm on Mon, 03/19/2018 - 15:39
- Platform you're using: Wordpress 4.9.3, upgrading to 4.9.4 hasn't helped. Using Guru theme with Sensei plugin to create lesson content.
- Mobile or Desktop: Desktop
- Browser: Chrome, Firefox (both up-to-date); issue does not occur with Safari!
- H5P plugin version: 1.10.11
- H5P content type version: Have tried a variety, e.g. Course Presentation, Audio player, Speak the words set. NB for some reason content types Flashcards and Memory Game break the tabs anyway (even on Safari) so can't be used in this format.
- Screenshots if it's a visual problem: see attached.
- Please check for error logs in the browser console (Ctrl+Shift+J in Chrome): no relevant errors but as I said, opening the console makes the H5P content appear ...
Any pointers would be great.
Tue, 03/20/2018 - 13:42
Hi Neil,Thank you for
Thank you for reporting this. Can you please provide the link for both plugins/theme I am unable to pinpoint exactly which one from the list in wordpress.org.
Tue, 03/20/2018 - 21:45
Sure, thanks for getting back
Sure, thanks for getting back to me.
Guru theme https://themeforest.net/item/guru-learning-management-wordpress-theme/78...
Sensei Plugin: https://woocommerce.com/products/sensei/
As both of these are paid I'm happy to give you access to our site if you need it.
Fri, 03/23/2018 - 09:39
Hi again, I've been on to the support for the theme Guru and they think it's a problem with H5P. I'd really appreciate any ideas anyone might have on this.
Fri, 03/23/2018 - 09:53
Hi Neil, Sorry for not
Sorry for not getting back to you sooner. Would it be possible to give me user access to your site. I might be able to find what is causing the issue without the need to use the plugins. Also a link to 2 - 3 pages that is having the issue.
Fri, 03/23/2018 - 14:11
Sure, is it possible to send
Sure, is it possible to send you a private message with login details? How?
Fri, 03/23/2018 - 14:16
Hi Neil,You can send the
You can send the information through this form.
Sat, 03/24/2018 - 14:51
Just sent them, thanks.
Just sent them, thanks.
Tue, 03/27/2018 - 15:03
Just to update you on what we
Just to update you on what we're finding so far. The problem on Chrome is not universal as I've had some friends testing it without problems. Still a bit of a mystery as to why it doesn't work on other machines, looking into it.
The Firefox issue seems more universal. Got the following comment from our developer:
"Checked on firefox - for some reason the audio players are inside iframes that have inline styling with height set to zero? It's h5p controlling the presentation and putting those in there, why they have height zero I don;t know, if you disable the inline style in inspector they appear. This might be a specific query you could raise with the H5P people?"
Tue, 03/27/2018 - 15:26
Btw inspecting the iframes on
Btw inspecting the iframes on one of the problem pages on Chrome (https://learn.slb.coop/lesson/messaging-trends/) I can see that for each h5p-iframe, "height: 0px" is set for those that don't display. The first tab, which opens with the page, displays the M/C Q no problem and has "height: 491px". Tabs 2, 3 & 5, which don't display for me, "0px".
So to experiment I switched the H5p content from tab 3 to tab 1 and miraculously, it now displays. So on Chrome this seems to be an issue that affects all tabs apart from the first one, i.e. all that are hidden away when the page opens.
Wed, 03/28/2018 - 10:32
Hi Neil!Hope this is not too
Hope this is not too techy, but you seem to have someone for translation ;-)
H5P includes a script that resizes the iframe according to its surroundings. In the case of the tabs, those have the stye property "display: none" if they are not activated - they are not displayed. This leads to H5P getting a height of 0 when querying the surroundings when the page is loaded.
When you switch to a different tab, its display property will change, but H5P doesn't know of that. You can verify that it works by switching to another tab and resizing the window then. This "resize event" is a trigger that H5P will react to on its own. If you are in control of the server, then you could add something like
after the page's code that sets the display property of the tabs (might need a little delay, too). It will trigger a resize event without actually resizing the page and H5P will resize its iframe.
Tue, 06/08/2021 - 13:39
Image Hotspots disappearing or not loading
I have tried using H5P Image Hotspots with many tab and accordion plugins, but it doesn't work with any of them. It either loads and disappears or doesn't show at all. In one case it loads and stays on the first accordion even though I'm switching.
I have seen posts where it's suggested to use window.dispatchEvent(new Event('resize')); on tab switching which means that the chosen tabs plugin has to be modified (not a preferred route). Is there a way that can be fixed independently of a tabs plugin?
Tue, 06/08/2021 - 20:28
Hi!There are not only posts,