How to change the height of an iframe?

[digi-tales]

I tried to add an iframe, but I can only change the width. The height remains always the same. I use the stockholm-theme and the html-file is a h5p converted to html. It shows correctly but is cropped or way too small.

<iframe src="../media/h5p/file.html" width="100%" height="100%"> </iframe>

[schulle4u]

You can try to enter the height in pixels, e.g.

<iframe src="../media/h5p/file.html" width="100%" height="800"></iframe>

[digi-tales]

This works, but is there a way to always display the full height (regardless of the screen resolution)?

[schulle4u]

As an alternative you can use the viewport height to style the iframe, this should automatically resize it according to it's content.

<iframe src="../media/h5p/file.html" width="100%" style="height: 100vh;"></iframe>

HTH 🙂

[digi-tales]

Thank you, there is a lot for me to learn.