Custom CSS in Embed H5P HTML

Submitted by mailys on Mon, 10/14/2019 - 16:12
Forums: 
Developers

Hi, 

I have embed an H5P module as an iframe on my own website (I'm not using wordpress, moddle...) with the embed code in an html.

How can I easily custom the CSS of the module ? 

When I put css into <style> tag in the html, it's not taken into account. Is there a script or something that I need to add ?

Thanks for your help,

Regards

Maïlys 

 

 

 

otacke's picture

otacke

Mon, 10/14/2019 - 22:51

Hi Maïlys!

When you're embedding H5P from a different domain, you can't change the CSS for security reasons. Browsers prevent this so called cross-site scripting.

Best,

Oliver 

mailys

Tue, 10/15/2019 - 09:36

Thanks for your quick reply.
That's too bad, as we don't have the possibility to change button colors in the H5P editor...

Best, 

Maïlys

otacke's picture

otacke

Tue, 10/15/2019 - 17:28

Hi Maïlys!

But you can host H5P yourself and customize the CSS.

Best,
Oliver

BV52's picture

BV52

Tue, 10/15/2019 - 20:48

Hi Maïlys!

To add to this H5P.org was is not meant to host "real" content. It is for testing the contents which is also the reason that there are a lot of limitations. You could go to the getting started page https://h5p.org/getting-started to learn how to get started with H5P if you are done trying it out on H5P.org or sign up for a subscription in H5P.com.

@otacke thank you for the input

-BV52