Do you want to add the custom font for the site title? If you want then replace the code(see the attached image) with the code below.
h2, h1, #site-title {
font-family: 'INTERBOLD' !important
}
Hi Squarespacers,
I found some solutions to customize gradient on SQSP native video player.
Hope you'll find it useful 😀
/* Hide controls gradient on native video player */
.video-player .plyr .plyr__controls:before {
background-image: none;
}
/* Hide controls on native video player */
.video-player .plyr .plyr__controls {
display: none;
}
/* Change symbol and background color of Play/Pause button */
.video-player .plyr--video .plyr__control--overlaid {
color:rgba(255,255,255,0.35) !important;
background: #00B0A3 !important }
/* Customize video player gradient */
.video-player .plyr .plyr__controls::before
{
height: 25% !important;
background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.9) 50%,rgba(0,176,163,.85)) !important;
}
/* Tablet and desktop break */
@media only screen and (min-width: 641px){.video-player .plyr .plyr__controls::before {
height: 8% !important;
background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.95) 50%,rgba(0,176,163,.9)) !important;
}}
"height" is for (obviously) height of the gradient, and with "background-image" you can control color/transparency of gradient.
Be cautious when using "height" property because it could cover different area on desktop/mobile. I break it for Tablet & Desktop - @media only screen and (min-width: 641px) { INSERT CODE HERE } — as you can see in screenshots bellow (there isn't black line around larger video) .
/* Hide video caption */
.video-caption
{display: none !important}
Best Regards
Duško Bekar
