Embedding from Wordpress H5P Not Showing Up on LMS

Submitted by shawntrikha on Fri, 09/01/2017 - 02:24
Forums: 
Installation and server related problems

Hi!

We love H5P!

However, when we create content (such as an interactive video) through the Wordpress plugin and try to embed it onto our lms (Teachable.com) it doesn't show up. Here's the code that we are embedding :

<iframe src="http://workforceenergy.com/wp-admin/admin-ajax.php?action=h5p_embed&id=1" width="958" height="600" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://workforceenergy.com/wp-content/plugins/h5p/h5p-php-library/js/h5p..." charset="UTF-8"></script>

The weird thing is when I create the same interactive video on H5P.org and click on the embed and copy that code and embed it onto my LMS it works completely fine! This is the code that I copy from h5p.org :

<iframe src="https://h5p.org/h5p/embed/110986" width="1090" height="674" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

I wonder why it works from h5p.org but doesn't show up from our Wordpress H5P embed button?

Thanks!

 

 

 

 

otacke's picture

otacke

Fri, 09/01/2017 - 09:08

I guess your LMS is using an SSL connection (the URL starts with https)? For a good reason, browsers will refuse to embed content from other sites that are not using a secure connection.

You can notice the difference in your examples above. While the embed link of h5p.org starts with https, the one of workforceenergy does not.

If my guess is correct, you'd have to teach your WordPress server to handle https connections in order to embed your content in your LMS.

tomaj's picture

tomaj

Fri, 09/01/2017 - 09:19

Good job otacke! I didn't think of that for my answer! You are very probably right! :)

- Tom

otacke's picture

otacke

Fri, 09/01/2017 - 13:40

Just a common problem with a high probability for this answer to be correct ;-)

leonardo.cerliani

Sun, 05/17/2020 - 17:25

I have the same problem even if the embedded link is an https one. Do you have any idea why this is happening and how can it be solved?

This is a sample link (not sure for how much it will be active)

<iframe src="https://italiamore-5bc7ad.ingress-bonde.easywp.com/wp-admin/admin-ajax.p..." width="762" height="642" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://italiamore-5bc7ad.ingress-bonde.easywp.com/wp-content/plugins/h5..." charset="UTF-8"></script>

otacke's picture

otacke

Mon, 05/18/2020 - 10:49

Hi!

You can find more information at https://h5p.org/manipulating-h5p-with-javascript and in the comments.

I may release an extra plugin this week that could work as a workaround.

Sorry for the confusion. That's maybe not related. Would you mind sharing a link to the page where the problem occurs?

Best,

Oliver 

leonardo.cerliani

Thu, 05/21/2020 - 12:07

Hello otacke!

Thanks for looking into this. Here's a page I have hosted on my - work in progress - website:

https://italiamore-5bc7ad.ingress-bonde.easywp.com/testh5p/

For instance, I would like to embed this one

What I would like to do is to embed iframes with the h5p cards in an interactive document such as Dropbox Paper, Samepage.io or Notion.so. I know that in Dropbox Paper is not possible (although that one would be the best ever!), but in the other two it is, and it works perfectly with the cards you have on the h5p.org website, e.g this one.

Why do I want to do this: because in this way the student and the teacher would be able to work on a shared live interactive space (like Dropbox Paper)

Thanks a lot in advance for your help!

leonardo

 

otacke's picture

otacke

Thu, 05/21/2020 - 19:07

Hi Leonardo!

It's your server that's the issue. It does not allow to embed its contents into other sites. The X-Frame options are set to 'sameorigin', but there's not Content Security Policy in place that allows embedding. You/your admin would need to adjust the policy.

Best,
Oliver

leonardo.cerliani

Fri, 05/22/2020 - 10:47

Hello otacke!

I have the wordpress site on easyWP, so I couldn't directly intervene on that.

They managed to solve the problem eventually after chatting online with the support technicians.

For reference - also to people who have the same issue - the implemented solution consisted in adding the following option to .htaccess 

 

proxy_hide_header X-Frame-Options

 

Now I am able to embed h5p content from my website into collaborative notebooks from notion.so and samepage.io, which is exactly what I needed. It would be great if h5p content could be embedded in Dropbox Paper documents, however this option is not available. I will make a specific post for this on the forum, to see if anybody would share my interest in doing so.

thanks a lot for putting me in the right direction!

all the best,

leonardo