Sudden problem displaying H5P content on Wordpress

Submitted by neil_mcm on Mon, 03/19/2018 - 15:39
Forums: 
Installation and server related problems
  1. Steps to recreate the bug: Create a lesson page with tabs (shortcode from Guru theme on Wordpress) and insert H5P content into different tabs. This was all displaying perfectly until yesterday, and now nothing will display within tabs on Chrome or Firefox, but yes on Safari. When opening the Javascript console, there are no relevant errors and the H5P content will suddenly appear. Refresh the page and it disappears again! BTW inserting the content into a tabless part of the page works fine, but I've built my lessons using tabs and I would ideally like to keep doing so. Btw I uninstalled AdBlock but this had no effect.
  2. 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.
  3. Mobile or Desktop: Desktop
  4. Browser: Chrome, Firefox (both up-to-date); issue does not occur with Safari!
  5. H5P plugin version: 1.10.11
  6. 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.
  7. Screenshots if it's a visual problem: see attached.
  8. 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.

Attachments: 
Image icon Chrome view.png
Image icon Safari view.png
BV52's picture

BV52

Tue, 03/20/2018 - 13:42

Hi Neil,

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.

-BV52

neil_mcm

Tue, 03/20/2018 - 21:45

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.

 

neil_mcm

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.

Best,

Neil

BV52's picture

BV52

Fri, 03/23/2018 - 09:53

Hi Neil, 

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. 

-BV52

neil_mcm

Fri, 03/23/2018 - 14:11

Sure, is it possible to send you a private message with login details? How?

thanks

BV52's picture

BV52

Fri, 03/23/2018 - 14:16

Hi Neil,

You can send the information through this form.

-BV52

neil_mcm

Sat, 03/24/2018 - 14:51

Just sent them, thanks.

neil_mcm

Tue, 03/27/2018 - 15:03

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?"

Thanks

neil_mcm

Tue, 03/27/2018 - 15:26

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.

otacke's picture

otacke

Wed, 03/28/2018 - 10:32

Hi Neil!

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

window.dispatchEvent(new Event('resize'));

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.

Best,
Oliver

jasminam

Tue, 06/08/2021 - 13:39

Hello

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?

Many Thanks

otacke's picture

otacke

Tue, 06/08/2021 - 20:28

Hi!

There are not only posts, but there's a dedicated page describing that issue: https://h5p.org/manipulating-h5p-with-javascript. If you're running H5P on WordPress (you didn't say), then the Resize Pulse plugin may be a viable workaround.

Best,
Oliver