H5P iframe in Rise

Hi, I have successfully embedded a H5P iframe within Rise. The problem is that the iframe sizing is wrong, as you can see in the attachment (the 'Show Score' button is cut off, and you can't see the toolbar at the bottom). This happens in both the preview and the exported version.

We're happy to try and fix this in the exported version (for now, at least) - in fact, in the exported version, we added H5P's resizing script to enable responsiveness (which usually comes as a script tag along with the iframe tag, but Rise won't allow this in the iframe embed textbox) and it works just fine, except we're still experiencing the cutoff at the bottom.

Can you help?

Kind regards,

Mark

47 Replies
David Mon

Hi there,

I've been trying to embed my sample H5P interactive video in Rise but I only get this message: Please enter a valid URL or iframe

I tried embedding the code from my H5P account and from a Wordpress project but they don't work.

I have tried to follow all the steps mentioning in the comments, so I don't understand why it's not working.

 

Maxwell Dziku

Hello Ashley, I'm keeping the content on H5P and just embedding it. The code is below.

It works great within Rise but after publishing it doesn't show up. Also, doesn't show up when running in the LMS.

<iframe src="https://h5p.org/h5p/embed/249012" width="1090" height="806" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Ashley Terwilliger-Pollard

Thanks Maxwell for sharing that code. I added it to a Rise course here, and you can view it with the Share link and here where I exported for Web.  I wasn't sure which LMS export options you were using, but if you want to share I can test that too. 

I viewed it in Chrome and Firefox, where the embed showed up for me in both. Let me know if you're able to give that a test and how it works.

Maxwell Dziku

Hello Ashley, thanks for testing that. Your examples seemed to work the first time I looked in chrome. However, when I checked again after a few hours, it is showing a blank screen, just like mine was behaving. Could you send me an email address I could use to forward my Rise course to you?

Testing in Firefox also worked when I just checked but not sure if it will behave the same way after a while. It will be awesome to be able to integrate H5P content seamlessly into Rise, and I know people seem to be doing it without any problems so not sure why mine is acting up. I had exported for web and to LMS (using Sakai for testing).

 

Leslie McKerchie

Hi Amr,

A quick Google search led me to this website, which is what I assume you are referring to.

The instructions state:

A free HTML5-based voice recognition content type allowing authors to ask a question that should be answered with the user's own voice. Speak the Words content is created using only a web browser in H5P supported platforms such as WordPress, Moodle and Drupal. The speech engine used is currently only available in the Chrome browser.

So, that may explain why it's not working well for you.

Perhaps others will be able to chime in and help you out though.

David Kettle

I've been able to get H5P embedded in Rise no problem when using content from the H5P.org website.

<iframe src="https://h5p.org/h5p/embed/296610" width="1090" height="468" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

However when I embed H5P content which is hosted on our Moodle site, in Rise when editingpreviewing or in Articulate Review the content appears blank, however there is a space where the embedded content should be.

<iframe src="https://www.sqaacademy.org.uk/mod/hvp/embed.php?id=27343" width="1247" height="468" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

(Note: The Moodle H5P activity is likely to be removed once this is resolved)

If I export the Rise project for LMS as a Scorm package and add it to our Moodle site as a Scorm activity, the embedded H5P content (hosted on our Moodle) displays ok, it is embedded once the Scorm is hosted on our Moodle. (Rise Scorm export attached)

I would expect this if the H5P activity hosted on our Moodle site was restricted, but I've placed the activity on our frontpage, so no log in required and I've tested it by loading the embed url (https://www.sqaacademy.org.uk/mod/hvp/embed.php?id=27343) in different browsers where I'm not logged into our Moodle, the embed url loads no problem. 

The source is using https so there shouldn't be a security issue.

The only potential issue I can see is that the moodle url is formatted a bit differently with embed.php?id=27343. That's about the only difference between the two I can think of which might affect if it's displayed by the online Rise editor / preview.

Having the H5P not display in the editor means that it's hard to see if the sizing is correct or not, it requires the extra steps of exporting and uploading as a Scorm package, just to check the size. When we have multiple H5P activities embedded, there is no visual way to tell them apart except for checking the embed url.

The take away is that it is possible to embed H5P hosted on Moodle in Rise, even thought it looks like it doesn't embed properly, but the display issue makes it problematic for editing.

David Kettle

We've figured out what the issue was that stopped Moodle hosted H5P activities from displaying in Rise, by default, Moodle blocks content from being displayed in Frames outside it's own site address.

There is an option (Administration - Security - HTTP Security - Allow frame embedding) which is off by default, if this is enabled, H5P embed links from Moodle will then show in Rise. (It alters the X-Frame-Options for the site.)

However, it is worth noting this could possibly increase the security risk for your site, so it should be done at your own risk, fully informed, etc.

Cheryl Tyler

I see this link is over a year old but was wondering if anyone has had any luck with other H5P embeds than just video.  I have a language one that uses the SPEAK THE WORDS set which works great in H5P but does not work at all in Rise.  I wonder if it's just that Rise cannot access the microphone.  Anyone have any clues?

Cheryl Tyler

I see this link is over a year old but was wondering if anyone has had any luck with other H5P embeds than just video.  I have a language one that uses the SPEAK THE WORDS set which works great in H5P but does not work at all in Rise.  I wonder if it's just that Rise cannot access the microphone.  Anyone have any clues?