Submitted by castelmager on Mon, 02/27/2017 - 21:43
I'm using the mini audio player in the course presentation activity in order to have a minimal look and feel. The thing is that the minimal player does not allow to restart the sound.
I'm trying with the normal player the meet the needs perfectly ,but I cannot remove the download button.
Exist anyway to remove that button from audios?
Tue, 02/28/2017 - 07:47
I think changing the css is probably your best bet for doing UI changes like that. Have a look here for some more info on how to go about it.
Tue, 02/28/2017 - 11:28
I'll try it.
Now seems that the audio player has been updated and does not have the download button anymore, but I'll play with the css anyway ;)
Wed, 03/01/2017 - 09:50
Awesome! Good luck!
Mon, 04/03/2017 - 16:35
Hi tomaj,The download button
The download button is still there :(
I'm using the component with the embeded code, in the iframe and in that case i'm not able to chance the css.
Exist anyway to disable direct the download button by configuration ?
One workaround is just put some label or image on the front to hide the button, but since the component is not responsive the label that hide the buton does not fit right in some screens resolution...
I appreciate any suggestion.
Tue, 04/04/2017 - 07:49
Try the hook
You should be able to change the css inside the iframe by using the hook provided to your system by the h5p plugin.
I don't remember if the audio controls are provided by the html5 audio tag. If it is, then I don't think you can style it away (unless you tinker with the shadow dom, and I don't know how cross browser supported that would be).
Tue, 04/04/2017 - 11:56
Hi tomaj, thaks for your response.
I followed your isntructions here : https://h5p.org/documentation/for-developers/visual-changes and added my custom css file with this change :
width: calc(100% + 30px); /* Adjust as needed */
This will hide the download button.
thanks for support!
Fri, 04/07/2017 - 08:51
Good to hear
Good to hear that you found a solution. :)
One question though. Are you not supporting IE/Firefox, since you are using the webkit specific css selectors?
Wed, 05/02/2018 - 23:57
Thanks for this solve!
Implemented it and it works!
Wed, 02/20/2019 - 22:51
attempted css mod
I'm struggling here with the same problem. I attempted to add the custom css to the wordpress theme editor as was instructed above, both as solely the script above and as following the script in the example... I'm not really sure what in the example needs to be swapped out with the above script... can you clarify?
Wed, 02/20/2019 - 22:54
struggling with the css script
I'm trying to follow the correction above by adding the css in the wordpress theme css editor but I think I'm not following. Can you clarify what in the "example" script from the visual changes forum needs to be substituted with the script from above? Thank you!
Tue, 04/16/2019 - 10:03
I recommend just copy pasting
I recommend just copy pasting or using the code from example plugin to get started quickly.