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
Akshay Iyer

Hi Mark and Aaron

Just wanted to ask you a basic question. So HP5 has plugins to Drupal and Wordpress. When it comes to content you guys are doing, are you streaming it from the HP5 site or is there a way around it?

So is your rise course linking to an interactive video hosted on HP5 or have you managed to host it on your environment?

Warm Regards

Akshay

Donald Kerns

H5P (https://h5p.org/) is interesting and has some really nice features for creating interactive HTML5 content (not just interactive video). It appears that right now, you must publish the H5P interactive project file to  Wordpress, Moodle, Drupal server (only supported platforms). Then, you can embed it in Rise via iFrame (but it would be really nice if Articulate supported direct installation of the H5P content into Rise (see https://h5p.org/installation) - but I have no idea of the tech challenges with that idea!).

I successfully embedded a sample H5P interactive video using both the Rise Pre-Built Lesson (URL/Embed) or the Blocks (Multimedia > Embed). But the key was to remove the resizer script that is automatically included with H5P's iFrame embed code (i.e., remove the bold italicized text below): 

<iframe src="https://h5p.org/h5p/embed/617" width="1090" height="674" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

The iFrame code above does include a full-screen icon that works in Rise (at least using Chrome on Mac). According to H5P, the resizer.js script needs to be included on your website if you want dynamic sizing of the embedded content [I did not test this with Rise since I don't have a Wordpress, Moodle, or Drupal server.]

Interactive Education

Thanks Donald, But I could not embed the h5p link in Rise. 

<iframe src="https://h5p.org/h5p/embed/617" width="1090" height="674" frameborder="0" allowfullscreen="allowfullscreen"></iframe> "https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" 

What is my mistake?

Thank you

 

 

 

Interactive Education

OK I got it!

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

I hope That Rise will adopt the options available on H5P as part of the system.

Thank you all for the wonderful support!

 

 

 

 

Joe Mefford

I realize that you have to turn it on/off in H5P. I'm building my H5P modules in WordPress and then embedding them in my Rise course. Problem is once I turn off the "Show Embed" option, then I can't get the code to actually embed the module. I've tried to get the code with the Embed element and then turn it off in the iFrame script; that doesn't appear to work.

Joe Mefford

Okay...I found a solution which isn't the best but it works for now.

1. You have to create the content within h5p.org and not within Drupal or Wordpress. 

2. After creating the content, make sure to keep the Embed button checked. Get the <iframe> code.

3. Go back to your content and uncheck the Embed button. Save it. At this point, there is no way to retrieve the <iframe> code since you've disabled Embed.

4. However, you can copy/paste the original <iframe> code you saved in Step 2. It will work in your Rise build and the H5P footer will not be there.

It's definitely a hack but it appears to work fine.

Compono  | Inspiring Learning Experiences

Hi All

I have recently done many tests with embedding H5P interactive content into rise, using the </iframe> embed code and placing the <script> inside the <head> of the index.html of the rise export publish.

This fails on iOS tablet or phone. where the responsive resizing of the H5P interaction breaks. this happens when rotating from portrait to landscape and back, the width will be incorrect and the interaction inside the frame will be to large to fit the frame. When you hit refresh it will size back appropriately, but this is not a fix off course. 

It appears the resize script is not triggered on orientation change. 

I'll report this as a bug as well.