How can I scale embedded H5P features in Moodle?

Submitted by kwerkstetter on Fri, 10/05/2018 - 15:45
Forums: 
Content creation

Hi H5P community,

hope somebody can help me with this problem, as our admin is ill (and probably will be away for another couple of weeks) and there's nobody else around to ask.... I'm rather new to Moodle and H5P and I'm not in IT expert... So I apologize in advance if I may not use the correct moodle / H5P terms... and I hope I put this question in the right subject!

Some background regarding the problem: We use Moodle for an e-learning for patients with a celiac disease, it consists of 4 units (=courses) and each unit consists of several lessons. 

It's almost ready and recently, the Moodle platform on which we are running our modules was finally updated. The H5P plugin was available earlier, but so far it was only possible to either create a regular Moodle lesson OR an "H5P only" lesson. Now after the update, we have to option to also embed H5P features (e.g. image hotspot or memory game) in the regular lesson, which has several advantages for us. Therefore I "re-constructed" parts of the e-learning and embeded the H5P in the regular moodle lesson where applicable. 

However, the H5P features appear in a very large format (complete width of the available windos/frame is filled) and many of them are not shown on one page, e.g. you need to scrol up and down to do the memory game, which is of course not user-friendly and quite dump. I cannot find any possibility how to scale the features. When I click on "embed" in the lower left corner beyond the H5P feature, a pop up opens, here I always copy the link to embed it in the regular lesson and I also saw that you can click on "advance" and some script for dynamic sizing of the embedded content appears, but I have no idea how and where to use this scipt properly.... 

Has anybody an idea how to solve this problem? 

I also attach two screenshots to try to show and explain the problem and the only option which I found that might help in some way (script for dynamic scaling), but I have no idea how to use it, as explained above. 

Thanks in advance for your help! Katharina

 

 

 

Attachments: 
Image icon Embed option with script for dynamic sizing.PNG
Image icon Screenshot of memory game - to large to show at once on screen.PNG
thomasmars's picture

thomasmars

Mon, 10/08/2018 - 09:48

Hi Katharina,
When you embed and include the resize.js script, the content will grow or shrink to fill its available width. This is to make sure that the content will be responsive and viewable on any device, ranging from phones to projectors.

If you do not wish the content to use all available space given to it, you must restrict the available width. This can be done by putting the H5P content into an HTML element that has a limited width. Typically you would embed your content with a code that looks something like this:

<iframe src="http://your.site/mod/hvp/embed.php?id=123" width="123" height="123"
  frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script src="http://your.site/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>

Now, we can wrap this in a <div> element and limit the divs size, the iFrame we are embedding within will then respect the limits set on the div, for instance by limiting its width to a certain amount of pixels. Here is an example of limiting the H5P width to 150 pixels:

<div style="width:150px;">
  <iframe src="http://your.site/mod/hvp/embed.php?id=123" width="123" height="123"
    frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  <script src="http://your.site/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>
</div>

You can experience with different widths on the <div> to find what will work best for your site.
Hope that helps, let me know if you have any further questions.
Best regards, Thomas

 

kwerkstetter

Mon, 10/08/2018 - 14:16

Hi Thomas, wow, thank you for your fast reply - very easy to understand and very helpful! I just tried it and it worked out well! :-) 

However, I also understand your concern/comment regarding the responsive design. Therefore I just tried the an Image Hotspot for which I changed the setting as you suggested using <div style="width:1000px;"> and compared it with another H5P Hotspot (which is still embedded as usual and responsive) on my mobile. Although our e-learning will not be particularly advertised for mobile use, many users will probably access it with their smartphone and then it's of course problematic if the design is non-responsive.... 

Therefore I'd like to ask an additional question: is it possible to set a maximum width and/or height as well? 

Thanks so much for your help - really a great support as there is nobody here to ask in my office... (and I'm afraid this situation will not change that quickly....) 

Best wishes, Katharina

thomasmars's picture

thomasmars

Wed, 10/10/2018 - 09:17

Hi,
There are options to limit a div's size without making it unresponsive. For instance you can use scaling width sizes, like %, em, rem, etc. See MDN's guide for CSS values and units.
In addition you can set max-width, and media-queries which will override the width property when that condition is met.

Good luck :) Best regards, Thomas

ion7

Thu, 07/01/2021 - 12:04

Hi 

I tried the CSS script offered above but it will only work when the 'Embed' option is included.  When I uncheck the 'Display toolbar' option, the CSS no longer applies itself.

Is there a solution to this?

Thank you.

  <iframe src="http://your.site/mod/hvp/embed.php?id=123" width="123" height="123"    frameborder="0" allowfullscreen="allowfullscreen"></iframe>  <script src="http://your.site/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script></div>

Tracy.Hodges

Tue, 04/11/2023 - 11:48

You could try making a 3 column table and putting the content in the middle column, eg

<table width="100%">

    <tbody>

        <tr>

            <td width="20%"></td>

            <td width="60%">[add content here]</td>

            <td width="20%"></td>

        </tr>

    </tbody>

</table>