Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Community Answers

  1. shembach's post in Trying to customise the video block player controls was marked as the answer   
    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 } }  

  • 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.