Removal of Action bar, get rid of <embed> etc. from displaying

stopbit's picture

Hi,

 

I'm using H5P on Wordpress, although I'm using the resources I create within Moodle - another CMS focussed on elearning. Currently I'm embedding the iFrame code so my H5P resource show within Moodle content pages.

I have found that within the creation options in wordpress, I must select 'action bar' & 'embed' otherwise I cannot use on another site, i.e. H5P resource does not display if these options are not checked when using the iframe embed code.

The issue here is that I don't want anything contained within the action bar i.e. 'embed' to be displaying within Moodle when using the iframe code.

I have attempted to compensate and remove the bottom action bar, by messing with css in my Moodle to cut down the display area from the bottom of the iframe. Although I'm having real difficulty in acheiving this. I believe my rules are being overridden by the built in javascript resizer.

I am wondering if it's possible to alter or customise H5P, so that the action bar does not show when referring to the H5P resource - if used as an iframe in other site, such as my Moodle installation.

An image is attached showing what I want to achieve, I don't mind how I achieve this, I can change anything on my systems to ensure the the action bar is not shown (remember though I do need to grab the embed code from the wordpress admin, so I can insert it in the Moodle content.

All the best, many thanks

Steve

Attachments: 
stopbit's picture

Hi,

Ok, answering myself after much playing around in the H5P code, I discovered there's an definition that can be added to the wp-config.php files in your Wordpress root directory.

Simply add this line to wp-config.php:

// EDITED to allow always show iframe content even when embed option in H5P is disabled.
define('H5P_EMBED_URL_ALWAYS_AVAILABLE', true);

Then save the file.

Next within the options of your H5P resource, uncheck the 'Display action bar and frame' option in the admin creation page.

That's it!

Only issue is that when you first create the resource, ensure the options 'Display action bar and frame' & 'Embed' is selected. This means when  the page saves you can eassily rab the iframe embed code. Use the code on the site or page you want to, then go back edit the H5P resource once again and uncheck the options & save.

Hey Presto! DONE!

Good luck everyone, lovin' H5P atm.

falcon's picture

Thanks a lot for sharing both the question and the solution. We will make this simpler for you in the future, but it will take some time.

Hi Falcon,

Have you guys made this simpler now? I would like to have this bar removed as well.

falcon's picture

Hi,

Yes, there are settings for removing the bar for all platforms H5P supports.

stopbit's picture

Hi,

I had to make this change in the config as when using the h5P settings to de-activate the action bar, this prevented access to any embeded H5P content. That is to say this problem occurs *only* when using iframes, i.e. for cross domain usage.

I haven't seen any change in this behaviour yet, does this mean I can now remove this piece of code from the config Falcon?

Thanks

falcon's picture

Hi,

In WordPress you still need the extra config to make embedding work when the embed button is disabled.

stopbit's picture

Hi Falcon,

No problem, I'll leave it as-is for now. I just wanted to ensure I'm using the best method.

Many Thanks

Hi Falcon,

Thanks for the swift reply. I use Wordpress. Where would I find this setting?

Rgds.

Tarik

Hi Falcon,

Nevermind. I found it. Was quiet obvious actually. Silly me.....

 

Rgds.

Tarik