H5P iframe in Rise

Hi Ashley

- it's Case #01313559 

Thanks so much for sharing the case number with us here. I can see that you're working directly with John, so you're in great hands :)

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.

Hi David,

Do you have a link to your H5P interactive video you can share with me? I've found success using this simple iFrame:

<iframe src="Insert URL Here"></iframe>

I'm happy to test that for you if you don't mind sharing the URL with me!

I'm getting the blank screen with content I embedded as well. It works when you fully preview but shows a blank screen when editing the course (worked initially at first embed). Not sure if it's a connection issue with the H5P hub or other problem.

Hi Maxwell,

If you want to share the code, we can take a look. If the embedded content is blank, you'd also want to make sure it's using https - as Rise is secure, embedded content must also be to work properly.

I was able to figure out the problem and was able to resolve it. Thanks for your offer to help!

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>

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.

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).

Hey Maxwell! 

You can send us your Rise "Share" link through this form. We'll take a look and let you know if we can see the embedded content, or if it appears blank. Thanks!

Thank you, Alyssa. I have sent it along.

Has anyone derived a viable solution for embedding h5p content into Rise?  I was able to embed, but you cannot view the content on a phone.  I know a few people said they came up with a solution.  Any help would be appreciated!

Has anyone been able to make the H5P Speak the Words activity to work in Rise? I was able to embed it but the speech recognition does not work. Please help!

Hi Anthony,

I took a look at the case filed by Team Phoenix above. 

It seems that the playback issue was specific to viewing the content in Portrait mode and it seems to work as expected in Landscape mode.

Hopefully that helps you out as well :)

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.

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 editing, previewing 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.

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.

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?

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?

Hey there, Cheryl. Rise 360 will only send requests to access the microphone for Rise 360 elements, like recording an audio block. So currently, this type of external content won't be able to reach the microphone through Rise 360.