shembach

Thanks @Spark-Plugin for the workaround!

Hi,

I have a text block inside of a shape and want to set the padding around the text in all directions. The following CSS adds padding on top and on the left side, but pushes the text block to the right.

div#block-724f4172d3f3e1738bd2 {
    padding: 5% !important;
}

site is here

Any help would be greatly appreciated.

I'm looking to achieve the same thing.

https://rabbit-mango-m2ls.squarespace.com/portfolio

Any help would be greatly appreciated.

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

You can change the opacity of the play button, so it's not visible but still intractable.

.video-player .plyr--full-ui.plyr--video .plyr__control--overlaid {
  opacity: 0 !important;
}

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!