Embedded H5P examples from h5p.org content not fitting into frame

Submitted by John Nicholson on Mon, 09/28/2020 - 23:35
Forums: 
General discussion

Using our own moodle site (version 3.9), I have uploaded several examples from h5p.org and then used the embed code to display them within a moodle "label"  (Intending these examples to show my course managers what they can do with h5p).

These are functioning however there is a blank space at the top. The bottom of the content is out of view and a vertical scroll bar appears.  (see attached image)

I've tweaked the height and width settings with the html editor but cannot get fix this.   This is happening with every example I embed from h5p.org.  Any ideas?

 

Attachments: 
Image icon 2020-09-28 17_09_08-Course_ Demo 10 - H5P, Topic_ 2 Interactive Video.png
otacke's picture

otacke

Tue, 09/29/2020 - 11:47

Hi John!

If you say you uploaded the contents and them embed them using the embed code, what do mean by that? If you uploaded them, you don't need to use an embed link, but can include them by adding an activity. If you embed them, you need to make sure the resize script in included as well, so you need to use the complete embed code provided by clicking on the embed button - not just the iframe source URL. Otherwise H5P cannot resize the iframe that it is displayed in.

Best,
Oliver

John Nicholson

Tue, 09/29/2020 - 16:37

Thank you for your quick reply.  Sorry I was not quite clear.  My intention is to display the H5P examples both as "links" to activities and also as embedded presentations. And I did not want to have any dependancy directly back to the h5p website.  Here are the steps I took:

  • From the h5p.org examples, I used "reuse" to download the .h5p file. 
  • I loaded this directly into a moodle course using the "H5P" plugin. 
  • That produced the demo as a link to be clicked on the course page.  (see image) 
  • From that, I used the "<>embed" button to extract the full iframe formatting text.  (see below)
  • This iframe formatting I then added to the course in a Label.

<iframe src="https://ourwebsite.org/h5p/embed.php?url=https%3A%2F%2Fourwebsite.org%2F..." name="h5player" width="913" height="539"   allowfullscreen="allowfullscreen" class="h5p-player w-100 border-0"   style="min-height: 230px;">

</iframe><script src="https://ourwebsite.org/h5p/h5plib/v124/joubel/core/js/h5p-resizer.js"></script>

I attempted tweaking the width="913" height="539" values but could not get the h5p to correctly fit within the frame.

Attachments: 
Image icon 2020-09-29 10_31_49-Window.png
Image icon 2020-09-28 17_09_08-Course_ Demo 10 - H5P, Topic_ 2 Interactive Video.png
otacke's picture

otacke

Tue, 09/29/2020 - 19:47

Hi John!

You seem to be using moodle 3.9 and the core version of H5P. This one has not been created by the H5P core team, but by moodle HQ and I am not familiar with its peculiarities. Sorry.

Normally, H5P will use the the full width available (unless you put the content in a container with limited width) and scale the height of the iframe as needed no matter what you set - that's just an initial value. That's what the resize script is for. You might want to check on the network tab of the browser's dev tools if it is loaded or for error messages in the console.

Best,
Oliver

John Nicholson

Thu, 10/01/2020 - 18:38

Oliver - thank you for your replies.  Actually, just for closure, I did sort out what the issue was and it had nothing to do with H5P.  In Moodle, there is a place for adding extra HTML at the beginning of each page.  Somehow the H5P frame was being interpreted as a "page". 

One of our previous site administrators had added some HTML which was producing the gap.  As this was no longer needed, I removed the extra HTML and the gap and scroll bar disappeared.  

The details of the change I made:

From Moodle:  home/site administration/appearance/additional HTML  --> Within HEAD

I removed this text:

<div align="right"><a href="login/index.php?username=login">.</a></div>

Looks great now!

John

otacke's picture

otacke

Thu, 10/01/2020 - 20:38

Hi John!

Thanks for sharing that solution, maybe it helps others facing the same issue. Glad you figured it out.

Best,
Oliver

petiteclem52

Tue, 10/19/2021 - 15:51

Hello,

I am having the same problem, but woith learnworlds. Content (a grid for a crossword puzzle) does not fit and I cannot scroll down to see the rest. I was redirected to H5P by Learnworlds.