"&" encode problem in Iframe


  I got problem to add Iframe object.

In source URL, I have "&" inside, after save the Content, it was encoded as &amp and show in iframe src, it caused parameter can't be intepreted by source. 

e.g. source is


but after Iframe save and show it in html, it becomes


Could you please see how to fix this? 

I am using Wordpress Plugins

falcon's picture

I've added an issue for this in the H5P backlog for the H5P team. I didn't give it a very high priority so it will take some time for this to be looked into. It might be the HTML purifyer that encodes the &, but I'm not sure.

Hello there !

Yep, I'm resurrecting this very old thread because I am dealing with tha same problem : this ampersand character and the iframe embedder content type (https://h5p.org/iframe-embedder). Maybe the issue hasn't been resolved since ?

I'm using Wordpress (last release) and H5P (last release). My website is "https" (so no mixed content problem) ; I've checked the "embedding" option for all my contents. 

The issue : I am trying to embed an H5P content that I've created in the Column content type using the Iframe embedder (as suggested on this very forum). If I embed an URL that doesn't include ampersand it works perflectly. But H5P generates embedded URL including ampersand like this one : "https://www.blabla.com/wp-admin/admin-ajax.php?action=h5p_embed&id=293". And when I look at the code generated by the iframe embedder, the ampersand is rendered as & and the URL is like this : "https://www.blabla.com/wp-admin/admin-ajax.php?action=h5p_embed&id=293". So the content doesn't show up. There is no error in the console log (with Chrome inspector).


I've made some research and stumbled upon this pull request on Github : https://github.com/h5p/h5p-iframe-embed/pull/3 I've tried to add the provided code to iframe-embed.js but no luck : the ampersands are still there and the embed is not working (I've cleared the cachedassets too).

Could you tell me which file I should look into ?

Thanks in advance for any help you could provide :)


I just encountered this problem while trying to create course content with Moodle using the Interactive Content plugin.  Really surprising and disappointing.  A fix would be very helpful, since it seems I'm dead in the water as things are.

Hello !

Don't bother to reply to my previous post : in the meantime, I have found a (probably very ugly) way to get rid of the ampersand bug. I've modified the iframe-embed.js file with this code (around lines 24-25) :

var iFrameSource = ''; if (options.source !== undefined) { if (options.source.trim().toLowerCase().substring(0, 4) === 'http') { iFrameSource = options.source.replace('&','&'); } else { iFrameSource = H5P.getContentPath(contentId) + '/' + options.source.replace('&','&'); } }

And it seems to be working : I can now embed H5P contents via Iframe Embedder in Interactive Book (probably my favorite content type so far ; I hope its development will go to Beta one day soon :))

Kind regards,


BV52's picture

Hi All,

The H5P core team does not recommend using the Iframe embedder anymore since ti has is not responsive and is not accessible. Also this content types is not actively being developed.