Resizing the iframe when embeding Course Presentaiton

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.

Thank you!

Oleg

 

thomasmars's picture

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" 
  frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js"
  charset="UTF-8"></script>

 Replacing width="1090" and height="674" with your desired values should give your iframe a different size, e.g. width="640".

Hi Thomas,

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.

Oleg

 

icc's picture

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?

roman's picture

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.

thomasmars's picture

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?

roman's picture

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

thomasmars's picture

I see, thank you for this insight.

Hopefully someone can make use of this that is in a similar situation :)

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.

tim's picture

Hi nkearns,

thanks for reporting this. I've created an issue in the Core Team's ticketing system:


https://h5ptechnology.atlassian.net/browse/HFP-1107

The person handling the bug will reply to your comment once it's been resolved.

Thanks,

Tim

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.

 

 

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

E.McGraw-Austin's picture

Hi- thanks for all of your above comments. Other than putting the embed code in a table, has there been any progress on being able to resize H5p entries? I am using Blackboard Learn.

thanks, E

 

I would like to know the same thing as I am using Blackboard Learn too.