Documentation for custom CSS and multiple players

[aubreyz]

I am confused by the documentation and how multiple players fit with the new customising CSS. It only partially works as described in the documentation.

Let's say I have two player arrays:

const player = Plyr.setup('.js-playervid1a', {
        controls: ['play', 'progress', 'current-time', 'duration', 'captions', 'fullscreen', 'mute', 
'volume','play-large', ],
          });

const player = Plyr.setup('.js-playervid1b', {
        controls: ['play', 'progress', 'fullscreen', 'mute', 'volume','play-large', ],
          });

then if I add root customised css that works fine

:root {
  --plyr-color-main: #1ac266;
  --plyr-control-icon-size: 8px;
}

however if I want to customise one class only then this doesn't do anything at all

.js-playervid1b {
  --plyr-color-main: #1ac266;
  --plyr-control-icon-size: 8px;
}

neither does adding it in the HTML do anything at all

<video class="js-playervid1b" style="--plyr-color-main: #1ac266;">
    ...
</video>

Some hints in the docs would be great, or a statement that this is impossible and what needs to be done

Thanks for the custom css anyway - even at root it is great

[aubreyz]

Addendum: Nothing other than the :root customisation works at all (at least as descibed in the documentation), so it's not just a problem with multiple players. Minimal working example does not work: Using CDN 3.6.2

HTML

<div class="player-wrapper">
  <audio id="splayer2">
  <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" 
type="audio/mp3" />
  </audio>
</div>

CSS

.splayer2 { --plyr-color-main: #1ac266; --plyr-control-icon-size: 8px; }

JS

const plyr = new Plyr('#splayer2');

[sampotts]

It does work but obviously the examples aren't clear. For your example you'd need to use the following:

.player-wrapper {
  --plyr-color-main: #1ac266;
  --plyr-control-icon-size: 8px;
}

So it's either on a parent container which can be dynamically updated of course: https://codepen.io/sampotts/pen/YzwXOoP

Or as a style attribute on the initial element: https://codepen.io/sampotts/pen/ZEQGMdj

The problem with the second element is it can only be set once and not updated because the properties value is copied to the parent on initialisation.

Remember the CSS Custom Properties work in the same way as other CSS, in that the C stands for cascade so it has to be set on a parent or the element itself to work.

[aubreyz]

Great - got it. If you are tweaking the docs also note the spelling error /vieo

Probably worth giving at least one full working example of each of the three methods in the doc. I think what confused me the most is that by "specific class name" in the docs I took that as meaning that if one created several different players with different names, one could assign custom CSS to the a player type class. Clearly that is not the case, and you probably want to make it clear what you mean by "class" for the stupid folk out there.

[hoi4]

For me, setting --plyr-color-main in the styles attribute of the video tag works. But setting plyr-captions-background does not work. 🤔