H5P - Customizing Content
- Tyler Winchester (Unlicensed)
- Lane Donovan
Removing the Box Around Activities:
When editing an H5P activity, you can use the display options section on the right to add/remove certain features. To remove the box around your activity, simply uncheck the box that says "Display toolbar below content".
Nothing else will need to be unchecked because it will be hidden when you uncheck that first box.
Whatever you do, make sure you DO NOT uncheck the box that says Display Embed button. This will not only remove the embed button from the bottom of the activity, but it will also disable the activity in any courses it is being embedded into. (See screenshot below of what it would do in the course if you uncheck this.)
Making Activities Responsive: Since Canvas is already responsive, the H5P activity will be responsive as well when you resize the window. So you can embed the activity with the default embed code from H5P. If you would like the activity to expand even wider, you can change the pixel amount to whatever you like. (Highlighted in Yellow) Note: With certain activities, you will never want it to stretch across the entire screen or it will look weird. (Especially if you have a huge display) So use your judgment to set the widest width that looks best.
Changing Fonts in H5P
In H5P, there are usually a few fonts you can choose from by double-clicking on the font and selecting another option.
If you would like to upload custom fonts using CSS, there might be a way, however, it sounds like there are more cons than pros.
In order to use this feature, we will have to get it enabled first.
By default the custom CSS feature is disabled and customers are to reach out to their customer representative to get access to this feature.
The CSS overrides when applied to the entire organization affects all H5P content for all users.
The reason the custom css feature is disabled by default is that used incorrectly the feature may damage the look, functionality and accessibility of the content. Even if the content seems to be working after adding the CSS a future update of H5P that isn't compatible with the CSS changes may damage the look or behavior of the content.
Access to the CSS feature also introduce security problems. It opens up some attack vectors for someone with access to a customer's administration accounts.
All CSS overrides you do comes with a risk. The H5P.com content types are updated regularly and there is always a chance that an update might make your CSS overrides stop working.
More info here:
Custom styling (CSS) - H5P.com