Feature Request: Add fit-to-height option to web or React component

[mathiasmoeller]

Hey!

We have integrated the H5PPlayerUI from the h5p-react package into our website. The size of the H5P component depends on it's content, which is great. However, sometimes the content gets higher than the max screen height. For some content types this is a bit annoying since users have to scroll to interact with it.

Is there a way to limit the maximum height of the H5P Iframe to a certain value? We would need something like a calculated value based on the viewport height - navigation bars (e.g. calc(100vh - 74px)). I couldn't find a way to control that in the documentation.

Thanks a lot already!

[sr258]

Fit to height is not really supported by H5P out-of-the-box, as far as I know. If you use the iframe mode, you'll already have found out that this H5P sizes to width, but not to height. I totally agree that this is a problem that can be annoying for users.

My thoughts on how to solve the problem:

• We're currently working on a desktop player app for a client that displays H5P in a window (will be open sourced once finished). We've implemented a switch that changes the max-width of the component depending on the content type and its typical aspect ratio (~16:9 for Course Presentation and Interactive Video). That way these content types work well without scrolling. The problem are content types like Drag & Drop that have dynamic heights depending on the image the author added and ones with no fixed aspect ratio. If you mainly have issues with content types that have a fixed aspect ratio, this solution might work for you.
• You can add code that gets the iframe's width & height once it has finished rendering. You then resize the iframe's width taking into consideration the real aspect ratio of the content and the desired height so that the height becomes your final required max-height. This will work for content like Drag & Drop and Course Presentation, but it won't for content types that don't have a fixed aspect ratio (e.g. Fill-in-the-Blanks).
• The final solution would be to scale the content with CSS transform if the height is too large. You get the real height of the content and scale it if it is too high. This will work on any content type, but buttons will change their size too. We've tested scaling H5P content in the project mentioned above and it mostly works very well. We don't have a size-to-height feature in the app, but manual zoom buttons. Still I think it would be possible to implement size to height that way. If you need access to our code (it's going to be GPL 3 anyway), I can give that to you.

[mathiasmoeller]

Hey, thanks for the fast and in-depth reply! Since we need a fast solution for now we will send out a fixed width together with the h5p configuration. This allows the h5p player to still render the correct aspect ratio. It is of course not optimal since we cannot really optimize for different screen sizes but it is an easy fix.

Would it be a possible future iteration to switch between fit to height <> fit to width? Because currently the player uses the width it gets and adjusts the height as far as I understand? Maybe this could be a configuration to set the height and it adjusts the width according to the aspect ratio?

Anyway, I would be happy to hear once the desktop player app is ready! Will this maybe even support offline usage? Thanks a lot already :)

Edit: Should I close this ticket for now?

[sr258]

The desktop player will work fully offline and will play any h5p file. We can add "fit to height" resizing as a feature request and leave the ticket open for it. I can't make any promises but it might make sense to add this to the webcomponent or the react component.