I think I got it. Probably not the nicest way to do it, but it works. The following code will make the play button invisible rather than disabling it, so a tap/click on the video will still play/pause. It also hides the time, progress bar, fullscreen button, settings button, and adjusts the placement of the mute button on mobile (less squished into the corner).
Make sure to set "Player controls" to "All" in the video block settings. The css will remove everything besides the mute button.
// Make play button invisible
.video-player .plyr--full-ui.plyr--video .plyr__control--overlaid {
opacity: 0 !important;
}
// Hide video overlay gradient
.video-player .plyr .plyr__controls:before {
background-image: none !important;
}
// Hide time
.video-player .plyr__controls .plyr__controls__item.plyr__time {
display: none !important;
}
// Hide progress bar
.video-player .plyr__progress {
display: none !important;
}
// Hide fullscreen button (double tap/click for fullscreen)
.video-player .plyr--fullscreen-enabled [data-plyr=fullscreen] {
display: none !important;
}
// Hide settings button
.video-player .plyr--fullscreen-enabled [data-plyr=settings] {
display: none !important;
}
// Better placement of mute botton on mobile
@media (max-width: 767px) {
.video-player .plyr__controls {
margin-bottom: 10px;
margin-right:10px
}
}
