H5P iframe in Rise
May 16, 2017
By
Mark Oxley
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
Following. I am also interested in this. Right now we are adjust the css on export to make it work.
Hi Aaron, glad I'm not the only one! Can you share what you are adding to the CSS to make it work?
Hi Mark,
I haven't played around with H5P's embed code - but I'd love to get a look at what you're using and see if we can figure out some ways to help you. Can you share it here with us?
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
Hi Heroes,
any updates on successfully embeding a h5P interactive video in a Rise course ?
Thanks :)
Hi Philippe!
Not sure if anyone here has any updates for you. I have not seen additional information. Looks like they may have an embed code feature. Have you tried that yet?
Hi Heroes,
I am also very interested in embedding h5p interactive videos onto Rise! Any updates? Thanks!
Hi Elena,
I haven't seen an example of the H5P interactive videos - but have you tested out the embed code in Rise? How does it behave?
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.]
Thanks Donald for the throughout break down - really helpful information for others in the community and our product team. Much appreciated! 🌟
Thanks Donald, thanks Ahsley, that was really helpful! I managed to embed my h5p interactive videos in Rise
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
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!
Welcome to E-Learning Heroes yonim20 :) Glad you were able to figure out what you need and I appreciate you popping back in with an update.
Is there a way to create H5P content without having the footer bar that says Download or Embed. That makes it very easy for others to take my content. I suppose I could watermark or brand it but I'd rather just remove that option.
Hey! That's a feature you turn on or off on the H5P side....not on the Rise side.
Cheers!
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.
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.
Also, for reasons I don't understand H5P code has a height that is way too small. You will have to go in and manually adjust the height in the code to fit your Rise course.
Does anyone know if these steps will work when using Review to share a 360 project? The video plays fine when I use the LMS publishing option (albeit with that blasted footer bar left in). However, when I publish the module to Review, the page is blank...just a white screen.
Hi Diane! Glad you found this thread (after we chatted here) and it seems like a great reference for users and using the h5p content type. What software are you using to build your course? That could certainly be helpful as well.
I embedded a h5p interactive video into a slide in Articulate Storyline 360. When I published it to Articulate Review for colleagues to review it, the video page was blank.
It does appear and play when I publish it to the LMS.
Hi Diane!
Thanks for updating us on your testing.
I did a quick test and my h5p content is displaying in Review. Would you be able to share your .story file for us to take a look?
If you cannot share in the forums, you are welcome to share privately here.
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.