Resizing the iframe when embeding Course Presentaiton

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

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?

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.

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?

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.

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

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