Problem embedding H5P from Wordpress site to another site

Hello,

I am trying to figure out why I am not able to embed the following Iframe code on other websites.  I created the H5P content with the WordPress plugin.  On my other site that I am trying to embed the code into it says that whynotspanish.com refused to connect.  I also tried embedding it a different way in my other site and got an error that whynotspanish.com does not support Iframeing.

<iframe src="https://www.whynotspanish.com/wp-admin/admin-ajax.php?action=h5p_embed&id=2" width="800" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://www.whynotspanish.com/wp-content/plugins/h5p/h5p-php-library/js/..." charset="UTF-8"></script>

 

Any ideas on how to fix this or pointing me in the right direction to solve this would be greatly appreciated.

otacke's picture

Does your server impose restrictions for cross- origin resource sharing (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)?

BV52's picture

Hi codybee,

I suspect the same thing and you can access your browser console (usually F12 or Ctrl+shift+J) to verify this. You might see something like "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource".

-BV

Thanks for the replies.  I am not the most computer savvy so I'm stumbling my way through this.

I pulled up the console and I am getting this error...

Refused to display 'https://www.whynotspanish.com/wp-admin/admin-ajax.php?action=h5p_embed&id=2' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I read the article and tried adding the following to my staging sites .htaccess file

Access-Control-Allow-Origin: https://www.espanolenuso.com

Vary: Origin

This gave me a different error.

Failed to load resource: the server responded with a status of 500 ()

Any idea what I doing wrong?  I'll keep messing around with it but any guidance would be greatly appreciated. 

Thanks for your time!

BV52's picture

Hi codybee,

You might want to look at this page it will give you an idea on how to tackle this issue.

-BV

Thanks so much for pointing me in the right direction.  I was able to figure this out.  I stumbled upon this website and it helped me with figuring it out.  https://geekflare.com/csp-frame-ancestors-configuration/

For me adding this was what fixed my issue.

Header set Content-Security-Policy "frame-ancestors 'self' yourwebsite.com;"

Thanks for the amazing product and great support!