Using H5P.com content in Thinkific

Submitted by grantpumpkin on Thu, 04/08/2021 - 18:00

Forums:

I am very new to both H5P and Thinkific and am trying to embed content created via my H5P.com account into a Thinkific course. Whilst it seems to work fine with the example content from H5P.org, everytime I try to embed my own content from H5P.com it says that it's not iframeable. Would be grateful for any help.

Thanks - Grant

BV52

Thu, 04/08/2021 - 18:55

Permalink

Hi Grant,Please double check

Hi Grant,

Please double check your publishing setting, you need to make sure that it is set to "public". If you are still encountering the same issue please provide the following:

Browser you are using and version
If possible thinkific URL where you see the error message.

-BV

Attachments:

Publising options.png

grantpumpkin

Thu, 04/08/2021 - 19:12

Permalink

Published but still struggling

Have just tried to put this piece of content: https://fieldlab.h5p.com/content/1291293447059516767 into a Thinkific course using Google Chrome on a Mac Version 89.0.4389.114 (Official Build) (x86_64) and I get the message shown in the attached image - this also includes the URL. Do let me know if you need anymore information.

Thanks

Attachments:

Screenshot 2021-04-08 at 18.07.51.png

grantpumpkin

Thu, 04/08/2021 - 19:18

Permalink

Thinkific Response

I also had this comment from Thinkific:

David Lopez (Thinkific)

Apr 8, 2021, 8:38 PDT

Hi there,

Thank you for contacting Thinkific, David here happy to help!

H5P.org is discouraging people to host real content on their servers and pushing them to use their personal hosting or pay for H5P.com. This is from their FAQ:

H5P.org is for testing purposes only. You should not use it to host "real" content. Self host or use H5P.com instead.

The errors occur due to iframing support on the self hosted side. If you want to host H5P content and display it in Thinkific, you need to give the site permission to use iframes.

We have had another customer edit their .htaccess file on their hosting site to include:

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

This will allow you to host the content on your hosting site and then whatever website you enter in after that. This will work on most all updated versions of web browsers except for IE.

I hope this helps, please let me know if I can assist you any further. Have a nice day!

Sincerely, David // Thinkific HQ

BV52

Thu, 04/08/2021 - 19:30

Permalink

Hi Grant,David is correct we

Hi Grant,

David is correct we should not use H5P.org to host "real" content however it is a good way to test H5P features. In your case you already did and as you mentioned it worked. I am curious when you tested a content in H5P.org what was the URL/code that you used. You would normally need to use the embed code instead of the URL similar to the one below:

-BV

BV52

Thu, 04/08/2021 - 19:33

Permalink

Hi Grant,I also found this

Hi Grant,

I also found this article, it might help.

-BV

BV52

Thu, 04/08/2021 - 19:44

Permalink

Hi Grant,I just found out

Hi Grant,

I just found out what needs to be done.

First you need to get the embed code: <iframe src="https://bv-demo.h5p.com/content/1291251301929125809/embed" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://bv-demo.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>

From this embed code you need to retrieve the URL: https://bv-demo.h5p.com/content/1291251301929125809/embed

This is what you are going to use as the URL.

-BV

Attachments:

embed code.png

thinkific.png

grantpumpkin

Thu, 04/08/2021 - 20:04

Permalink