H5P content disappears in WordPress tabs

Submitted by awemond on Fri, 12/02/2016 - 00:56
Forums: 
Bugs in content types

I'm using the H5P plugin for WordPress.  I can create H5P content, but depending on where I place it on my WordPress page, it sometimes does not display (I see only a blank space where the H5P content should be).  The H5P content appears fine on its own or within some other shortcodes, such as the accordion shortcode.  For example, the code below displays the H5P content fine:

[accordions collapsible=false active=true style=accordion-container]
[accordion title="Title" style=""]
[h5p id="1"]
[/accordion]
[/accordions]

However, when I place an H5P shortcode within some other shortcodes, such as tabs, the H5P content displays only in the first tab.  For example, using the code below, H5P id 1 will display, but H5P id 2 will not:

[tabs collapsible="true" selected="0" event="click" position="top" ]
[tab title="Title 1"]
[h5p id="1"]
[/tab]
[tab title="Title 2"]
[h5p id="2"]
[/tab]
[/tabs]

Any idea why this is happening, or how I can make the H5P content work within a tab?

tim's picture

tim

Mon, 12/05/2016 - 08:55

Hi,

which 'Tabs' plugin are you using? 

This may have something to do with the order in which H5P content types are created. It may be the case that the H5P div is not present when H5P.init is invoked. 

Would you be able to test and see if a H5P Timeline content type can be shown within tabs? I believe a solution has been added there. 

awemond

Mon, 12/05/2016 - 23:37

The 'Tabs' plugin is from here: https://github.com/ubc/tabs-shortcode.

I tried an H5P Timeline and it does load in the later tabs - thanks!  What needs to be modified for the other content types so that they also appear this way?  

papi Jo's picture

papi Jo

Tue, 12/06/2016 - 09:38

More specifically it's the WordPress Tabs Shortcodes plugin.

thomasmars's picture

thomasmars

Mon, 12/05/2016 - 08:59

This is a known bug, when H5Ps are either invisible or not yet inserted into the DOM their height will be 0, which will look like there is only an empty space instead of the H5P.

There is an issue in the public issue tracker for resolving this where you can follow along the progress: https://h5ptechnology.atlassian.net/browse/HFP-208

In the meantime a fix for this would be to make sure that the H5P is always loaded and always visible initially when the page is rendered.

- Thomas

awemond

Mon, 12/05/2016 - 23:40

Thanks for the help!

kvarn

Mon, 04/23/2018 - 16:58

This works very well, but for some reason I can't set width="auto" height="auto" (the hight is always displayed incorrectly), so responsive design doesn't work when I set numbers for width and hight. And even if I do, sometimes it does not show all the content, but only the instructions (I think it shows everything till the first paragraph within the content). I have the same problem when I use the script for dynamic sizing.

Did you also find a way to set width and height in an automated way and show all the content?

EDIT: When I click on the "restore" button and maximize the window again, the content is shown in a correct way (Firefox and Chrome)..... So there must be a problem, when the content is initially loaded.

Best

Kvarn