Scaling issues when using iFrame in CKEditor to display H5P elements

Submitted by mnuttua on Tue, 02/04/2020 - 13:16
Forums: 
Installation and server related problems

Hi,

I'm a non-technical user tinkering with H5P and happy with the results on my WP site; elements work really well and they display correctly on all screen sizes.

However, when I try to embed an H5P-element on another site, in a CKEditor page, for which I enter the embed code from the H5P plugin into the CKEditor iFrame function, the element does display but it doesn't scale properly. Mostly, the bottom part goes missing on a desktop and the whole thing is all over the place on mobile. Manually copying the frame sizes the WP-plugin shows to the iFrame edit-box in CKEditor, doesn't help.

I followed this instruction in the WP-plugin: "Include this script on your website if you want dynamic sizing of the embedded content: <script src="https://h5k.nl/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>"

but that doesn't help either. I use CKEditor 4.6.2 (revision 20af917).

I'm open to solving this in a different way if there is one; I just took the iFrame route because I could.

Thanks in advance for any advice you can give (and for your patience with a layman).