H5P Moodle plugin integration : prevent video file upload to force using an internal video sharing service

Hello,

It is easy to find the css classes to hide to make the H5P upload video button disappear but it is not easy to apply in H5 Moodle activity, because the H5P activity editor is integrated as an iframe.

I read some documentation on how to apply custom css to H5P but this is not an easy way to have a custom theme function. We use a basic Moodle theme with only custom css. There is also a discussion in the Moodle forum that confirms the theme function approach is not simple and also proposes workaround but these code tweaks wont support an upgrade.

While reading some Stackoverflow discussion, I found it is possible to apply a custom css to an iframe while using javascript.
And Moodle enables us to add a custom javascript through Site administration > Appearance > Additionnal HTML.
Here is the script to paste in the HEAD field to hide the upload video H5P button :

<script type="text/javascript">
window.onload = function() {
  let iframes = document.getElementsByClassName("h5p-editor-iframe");
  let h5piframe = iframes[0].contentWindow.document;
  var style = document.createElement('style');
  style.textContent =" .h5peditor-field-description,.h5p-dialog-box:first-child,.h5p-or-vertical {display:none;} ";
  style.textContent +=" .h5p-dialog-box h3::after {content:' (suggested service)';} ";
  h5piframe.head.appendChild(style);
}
</script>

Replace the term "suggested service" by the name of your local video publishing service.

I made some tests and this tweak seems to work even in course presentation, interactive book, ...
And it wont be erased by an upgrade.

Oliver, could you please comfirm this css tweak wont have any unexpected effect elsewhere in H5P ?
Note it would be easier the H5P iframe to have a name or an id tag to easily refer to in javascript.

Thanks in advance for answer.

Kisses

Zabelle

Hello Oliver,

I had a look on the comments on the page explaning how to make visual changes in H5P activities.
I understand it seems to you a normal way to use a child theme to apply custom css, but we are not used to work that way in Moodle.
For most of the Moodle themes, the admin panel proposes an open field with custom css to apply to the theme. Here is an example of the Boost theme advanced settings pannel with custom css :


There are very few people that derive a child theme and that explains why a lot of people in Moodle discussions find it a difficult way.

A logical approach for Moodle admins would be to have such an open field in the H5P Moodle plugin settings, to apply custom css to H5P contents.

And as far I always applied theme customization through Moodle interface, I had the idea to use a custom javascript to apply custom css to H5P iframe contents ...
You tell me it is a "bad" way to do it, but for me, it is the logical way ...
And I am not sure it is technically a worst way do to it...

I will work to make my custom css as specific as possible to hide the upload video button. This will be interresting as much for my javascript approach as for the child theme approach.

Please let some H5P developer have a technical analysis on my proposition.
And give me your feeling about the idea to add a custom css field in the H5P Moodle plugin.

Kisses

Zabelle

Hello,

Here is the as specific as possible css to hide upload video button :

.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}
.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;}
.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;}  
.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'(suggested service)';}

It is not possible to make it more specific as far as there are no specific class on .h5p-dialog-box elements, nor on h3 titles in it.
Specific classes for these elements would help to have more precise css customization possibilities.

The javascript version to implement the custom css becomes the following (with precaution to test if the h5p iframe is in the page) :

<script type="text/javascript">
window.onload = function() {
  iframes = document.getElementsByClassName("h5p-editor-iframe");
  if (iframes.length>0) 
  {  
    h5piframe = iframes[0].contentWindow.document;
    var style = document.createElement('style');
    style.textContent =" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}  ";
    style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;} ";
    style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;} ";  
    style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'suggested service';} ";
    h5piframe.head.appendChild(style);
  }
}
</script>

Could a H5P developper confirm that css wont have a side effect on other H5P functionalities ?

Kisses

Zabelle

Here is the final version of the script that modifies the H5P iframe css only when H5P iframe is found :

<script type="text/javascript">
window.onload = function() {
iframes = document.getElementsByClassName("h5p-editor-iframe");
if (iframes.length>0) 
{
h5piframe = iframes[0].contentWindow.document;
var style = document.createElement('style');
style.textContent =" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}  ";
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;} ";
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;} ";  
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'. Privilégiez eZCast pour publier vos vidéos et utilisez la publication \"Téléchargement\".';} ";
h5piframe.head.appendChild(style);
}
}
</script>

Thanks for reporting this suggestion to H5P developpers.
I will myself report it in Moodle community to have more technical views on that approach.

Kisses

Zabelle