Embedding H5P in WordPress to another webpage

Submitted by EricMiller on Thu, 07/08/2021 - 09:23
Forums: 
General discussion

I'm creating H5P content in WordPress, which is working fine. However, I'd like to embed the HP5 content that I'm creating in my WordPress into a Canvas page.  I've tried, but when I embed the code, it's just blank in Canvas. Why is it doing that. Isn't it possible to do what I'm trying to do? 

BV52's picture

BV52

Thu, 07/08/2021 - 18:07

Hi Eric,

The embed code is designed to be able to use anywhere that allows embedding of Iframes. I suggest that you check the browser console (ussually accessed by pressing F12 on the keyboard). Errors in the browser console provides clues to what may be causing the issue.

-BV

EricMiller

Thu, 07/08/2021 - 22:50

Thank you, BV52.  I'm not sure what clue to even look for.

In any case, I've tried this on different browsers, with different iframe embedding contexts, and the result is the same. It just shows a blank rectangle, or nothing at all.

Is there some private vs. public issue?

Is there something I need to turn on (or turn off) in WordPress to make the iframe of this H5P item work outside of WordPress?

BV52's picture

BV52

Fri, 07/09/2021 - 18:59

Hi Eric,

In most cases the receiving site is where there is a need to change the settings such as allow iFrames or something similar. If you look at the browser console you may see something similar to the screenshot I attached, which you can use as a starting point to finding a resolution. Either by looking for it through the web or posting a screenshot here so that the community may look at it and provide suggestions. I would also suggest that you post the embed code that you are using so that we can test if we will be able to reproduce the issue.

Attachments: 
Image icon sample console error.png

EricMiller

Fri, 07/09/2021 - 19:17

Thank you, BV52.

That helps. I don't seen any message like that in the console. What's more, Canvas accepts all kinds of embedding, from many different sources. This is the only one that doesn't work. 

I did look into the X-frame option of my WordPress installation. I got a plug-in for changing it, but actually it shows the X-frame option heading as being all together off. So I tried setting it to allow, and put in the Canvas domain. But that didn't change anything. I tried to embed the code into another site, and that didn't work either. All of this would indicated that it is the source of the enbed code that is the problem, wouldn't it?

Here is the code itself: 

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

 

 

 

 

BV52's picture

BV52

Mon, 07/12/2021 - 18:27

Hi Eric,

I just tried your embed code and have the same issue. Looking at the browser console (screenshot attached), there is an error "mixed content" which prompter me to double check the embed code. You are hosting your site on http instead of https. Most if not all browsers will not show a page that contains a mix of https and http within in. So the best course of action is convert your site to https. This article might help.

-BV

Attachments: 
Image icon embed error.png
SparTacuS's picture

SparTacuS

Thu, 07/29/2021 - 15:32

Hi Both,

I can confirm that, as BV52 says above, the problem lies with http vs https. I can also confirm that once you sort that out it will work 100%. It is eactly how I create and host for embedding into Canvas.

EricMiller

Thu, 07/29/2021 - 16:04

Thank you, SparTacuS. Knowing that, I will work on this solution. I'm not really sure how to sort out the http vs. https issue at the moment, so I've got to figure that out.