Hi all, I am embedding the Course Presentation that I created on h5p.org. The iframe is fully responsive, but I cannot resize it so it's smaller on the page.Please let me know if I can resize it and how.
Mon, 09/12/2016 - 09:58
When getting the embed code you have the option of inputting the size of the iframe. You will get a code similar to this:
<iframe src="https://h5p.org/h5p/embed/617" width="1090" height="674"
Replacing width="1090" and height="674" with your desired values should give your iframe a different size, e.g. width="640".
Tue, 09/13/2016 - 07:16
I tried various options, but it does not resize. I wonder if there is some setting in moodle that may overwrite the parameters of the iframe (may be CSS).
I tried even placing it in a div and nothing happened.
Tue, 09/13/2016 - 09:44
What do you see if you right-click the element and choose the 'Inspect' option? How does the iframe code look?
Placing it in a div like you said should work as well. If you open your web browser's console (Ctrl+Shift+J in Chrome) do you see any error messages?
Mon, 10/31/2016 - 14:03
Hi all, came across this as I was researching the same issue. If I embed using the iframe, with a width and height set, but include the JS for resizing, it applies a width: 100% to my iframe. This would work fine if the embed was in a container like a div with a width set, but it is not. To fix this I add style="max-width: 800px;" where the 800px is the size I originally had set for the iframe. I think this might be a good addition to the resize.js to look at the original width/height set and not make it go bigger than those. I am not sure how browser friendly it is, but most new browsers should be ok with it.
Tue, 11/01/2016 - 09:36
Setting a fixed size in pixels and the resize script is not compatible with each other. If you set the width and height of the iframe you should not include the resize script, since it will always try to give the content type enough room. Have you tried to just remove the resize script?
Tue, 11/01/2016 - 14:28
Removing the resize script is not an option for us as the objects are than not resonsive as much. I understand that my solutions is not ideal, and usually these objects would be embeded into a container like a div with a set width. Where we are having them embeded there is no containing div, and no easy way for us to create one, so setting a max-width on the object worked real well. :)
Wed, 11/02/2016 - 11:23
I see, thank you for this insight.
Hopefully someone can make use of this that is in a similar situation :)
Tue, 05/16/2017 - 12:13
I have tried some of the suggestions above but cannot get rid of the horizonatal scroll bar on the iframe when I embed it (from my H5P account) into a label in Moodle. It works fine however, when I use the Moodle integrated H5P iframe embedded activity - no horizontal scroll bar shows. I tried including a max-width setting but it doesn't work.
Thu, 05/18/2017 - 09:44
thanks for reporting this. I've created an issue in the Core Team's ticketing system:
The person handling the bug will reply to your comment once it's been resolved.
Mon, 06/05/2017 - 07:15
For us it worked great since we generally put everything in a table that has a width of 800 px. We use moodle. Try that? and if it doesn't work try removing the width and height as well as having it in a defined table.
Tue, 08/20/2019 - 17:59
Hello ! Same issue.
I put my iframe with the video on a Moodle, in a table.
I tried changing the size in the <iframe>. But during the loading of the page you see that another layer of CSS comes and destroys my own. I tried to change the <td> </td> size and remove the code widht and height in the <iframe> so that the video ajust to the <td> size, but it just make it smaller in height with a scroll bar.
Does someone has a solution ?
P.S : sorry for my poor English
Connect with H5P
H5P is a registered trademark of Joubel