Plyr: Simple way to change the color?

[weavermedia]

This is not a bug. Just a question about the simplest way to change the blue color used on Plyr UI elements.

I'm loading the CSS and JS from CDN and using the simplest plyr.setup(); script.

It would be great to be able to pass a custom color in the setup call which changed all the UI blue colors to custom.

Any way to do this?

[sampotts]

Nope - the styling is taken care of with the LESS/CSS so you'd need to build and host your own. Later on once CSS variables are becoming more mainstream then it'd be possible to do using those. I'd prefer to keep the styling in CSS and the JS handling logic as they were designed to do.

[weavermedia]

Gotcha, makes sense 👍

Is there a CSS 'cheat sheet' that shows the selectors to target for coloring the play button and progress bars and hover states?

[sampotts]

It would be a case of editing this hex color:
https://github.com/sampotts/plyr/blob/master/src/less/variables.less#L12

..then you can build the CSS by first running npm install in the root of the project to install the dependencies and then run gulp which will output the CSS to dist/plyr.css . If you don't have NPM then you'll need to install node - you can use homebrew for this on a mac or just install the package on Windows.

[weavermedia]

Thanks. Is it not practical to do when using direct CDN sources? I targeted a couple of the UI elements but couldn't figure out the progress bar.

[sampotts]

Nope - the CDN is the processed LESS so you'll need to host it yourself. Eventually once CSS variables get more support then it'll be possible.

[Hi1307]

Sorry for commenting on such an old post, but is there any update on this? The referenced file no longer exists and in that time CSS Variables has gained wider browser support.

Edit: Grammar

[RCD-Y]

@Hi1307 If you're still interested in this topic, I think adding filter: hue-rotate(...deg) to the control div would be a quick and easy hack to change the color for now.

[orangcrsh]

@Hi1307 If you're still interested in this topic, I think adding filter: hue-rotate(...deg) to the control div would be a quick and easy hack to change the color for now.

I tried this lol look :

`

src="https://www.youtube.com/watch?v=hL-BvWLPseE?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"

`

But the Hue of the video also is changing any way of how to fix this ?

[Malthehave]

I'm having the same issue.

[trych]

Me too. Would love to have a simpler way of changing the main color.

[Moeefa]

You can change the player color using this code:

.plyr--full-ui input[type=range] {
  color: YourColor;
}

.plyr__control--overlaid {
  background: rgba(YourRGBColor, .8);
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: YourColor;
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(YourRGBColor, .5);
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: YourColor;
}

I hope I helped you!

[th-santos]

You can change the player color using this code:

.plyr--full-ui input[type=range] {
  color: YourColor;
}

.plyr__control--overlaid {
  background: rgba(YourRGBColor, .5);
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: YourColor;
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(YourRGBColor, .5);
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: YourColor;
}

I hope I helped you!

Perfect! Thanks.

[zakickes]

Having trouble getting this to work. My players are set up as follows.

html
<div class="filterDiv sound show vid" id="none" name="In The Rat Cave With"> <div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="Vc9Jwt7WtBE"></div></div>

script
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));

I've tried copying the css as is using .plyr, and have replaced .plyr with my class .js-player, with no results. I'm attempting to change to color of the play/pause button and the volume slider (blue be default)

Edit: Think I've figured it out. Is there any way to choose different colors for different videos?

[Moeefa]

@zakickes I think you can have different colors for different videos using something like sass or javascript.
Example:

document.getElementById("MyElement").style.color = "#"+((1<<24)*Math.random()|0).toString(16);

[bveenhof]

@zakickes I have the same problem; styling is not applied. How did you fix it?

[daymien]

You can change the player color using this code:

.plyr--full-ui input[type=range] {
  color: YourColor;
}

.plyr__control--overlaid {
  background: rgba(YourRGBColor, .8);
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: YourColor;
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(YourRGBColor, .5);
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: YourColor;
}

I hope I helped you!

Thanks ! Just add _plyr--audio_ to change audio stream color as well

...
.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
  background: YourColor;
}
...

[sampotts]

Just to update those following here, soon I'll have a release ready that will use CSS Custom Properties so it'll be as simple as setting --plyr-color-main: #1ac266 either on a style attribute or in your app's own CSS to set the main UI color.

[mrnat7471]

Is there a way to change the background colour of the player? for like dark and light mode versions of a website instead of it just being white all the time?