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
  • 4 months later...

Hello! 

Just wanted to drop in with a huge thanks for this post -- I have a portfolio gallery of vertical and horizontal videos I've put together for social media as a videographer, which include audio that I don't want playing on my site. These are obviously essential to marketing my services, so I want them to look good.

I was originally trying to find a way to change the dimensions of the player when the content is vertical because otherwise, on mobile, it's near impossible to see, and the 'minimal' controls exclude the fullscreen option, while 'all controls' still allows the viewer to unmute videos I explicitly want to keep muted. 

I was about to resign myself to just re-editing all of these videos to export without sound, which would have been a ton of work, when it finally dawned on me to check this forum for anyone that might have had a similar problem, and make a post about it if not. 

Lo and behold I found this post within 5 minutes of searching, and while it wasn't quite the exact solution I needed, it gave me the direction in which to look to figure out hiding the mute button (and playback speed setting, which I hadn't even thought about but realized was also pointless for my content) and I now have my problem very neatly solved. 

I may still explore a way to change the player dimensions so that fullscreen isn't even needed for the vertical videos; I'm just not sure how to go about that without simultaneously screwing up the horizontal videos without a way to distinguish in the CSS which video blocks should use the vertical dimensions and which should remain horizontal.

At any rate, thanks again!

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.