Jump to content

shembach

Circle Member
  • Posts

    7
  • Joined

  • Last visited

Posts posted by shembach

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

  2. 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!

  3. Your site looks great! Was wondering how you achieved that design. You are using video blocks with a thumbnail image, right? How did you mange to have the thumbnail image without boarders? I can only seem to do that with images. Would love to know how you did your motion page.

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