Jump to content

Trying to customise the video block player controls

Go to solution Solved by shembach,

Recommended Posts

Hi,

 

I'm trying to customise the video block player buttons. I have a reel on my site with autoplay, muted, and looped. I've already managed to hide the play button with the following code:

.video-player .plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: none !important;
}

The only control I want however is a "mute/unmute" button. Is there a way to hide the settings (playback speed) button, the fullscreen button and the progress bar of a video block?

Thanks!

Edited by shembach
Link to comment
  • Solution
Posted (edited)

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
    }
}

 

VideoBlock_MuteOnly.png

Edited by shembach
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.