(h5p-2.0.0-alpha4) H5P Videos don't resize by switch from "display: none;" to "height: 480px; display: block;"

Submitted by sh2023 on Mon, 11/20/2023 - 21:00
Forums: 
Bugs in content types

System:

Tested with following H5P content:

  • Greeting Card
  • Single Choice Set
  • Multiple Choice
  • Interactive Video

"console.log(window)" (Single Choice Set, Mulitple Choice, Interactive Video):

[...]

H5P.instances: Array []

[...]

H5PIntegration.contents: Object { cid-6: {...

[...]

"console.log(window)" (Greeting card):

[...]

H5P.instances: Array [ {...} ]

0: Object { options : {...} , id: 11, contentId: 11 ... }

[...]

H5PIntegration.contents: Object { cid-11: {...

[...]

Steps to reproduce:

  1. Create H5P Interactive Video, Single Choice Set or Multiple Choice
  2. Start page with "display: none;"
  3. Use jQuery on button with event listener to set "display: block; height: 480px; H5P.jQuery(window).trigger('resize');" on the parent element of <div class="field__label" />

Expected behavior:Video content (or Single Choice Set or Multiple Choice Set) should be shown. Described here: https://h5p.org/manipulating-h5p-with-javascript

Observed behavior:

Video content (Single Choice Set and/or Multiple Choce Set) stays invisible until browser status changes (webdeveloper tools on/off, resize browser window, browser to fullscreen).

Important information:

This happens with video content (e.g. embedded Youtube-Videos or locally stored MP4 files), Single Choice Set and Multiple Choice.

Switching to Greeting Card works as expected. Hence I guess it has to do with H5P.instances being an empty array.

otacke's picture

otacke

Tue, 11/21/2023 - 14:23

Hi!

As already mentioned on StackOverflow, I am not convinced that this is actually an issue with H5P core or the H5P plugin for Drupal 10 - even though one cannot rule that out, of course.

Setting the page (the whole document?) to have the CSS property `display` to be `none` is not standard behavior and H5P does not expect that. You have already figured out that this has to do with resizing.

In fact, if you leave out hiding elements, everything works flawlessly on my end: regular displaying, the resizing mechanism triggered manually, etc.

The `instances` property of the H5P object will only be set inside the iframe context, not outside of the iframe context (typically named `top`), so this should not be something to worry about.

One thing that might need investigation is if the H5P.Video content type (which is a dependency of content types that use video) has trouble resizing if the initial height was 0 - but given your description, it's not clear to me what content type you actually built and how you configured things. Same is true for your HTML/CSS which may also be a couse of trouble.

Ideally, you'd share a link to the page that one can investigate the issue on.

Best,
Oliver