Cannot change color theme

[trymeouteh]

Hello,

I am unable to figure out how to change the main color theme in the Plyr video player. This is my code below and I did set the --plyr-color-main CSS variable but nothing happens in the browser. I tried both Firefox and Chromium. Everything else works however. I installed Plyr with NPM.

<link rel="stylesheet" href="node_modules/plyr/dist/plyr.css">

<style>
    #myVideoPlayer {
        --plyr-color-main: rgb(123, 255, 123);
    }
</style>





<video id="myVideoPlayer" playsinline controls>
    <source
        src="video.mp4"
        type="video/mp4" />
</video>





<script src="node_modules/plyr/dist/plyr.min.js"></script>

<script>
    const myPlayerVar = new Plyr('#myVideoPlayer');
</script>

[trymeouteh]

Found a solution. Turns out You need to add a DIV wrapper around the video and edit the CSS variable on that DIV element.

<link rel="stylesheet" href="node_modules/plyr/dist/plyr.css">

<style>
    #myVideoPlayer,
    #myYouTubeVideo {
        --plyr-color-main: red;
    }
</style>





<div id="myVideoPlayer">
    <video controls src="video.mp4">
    </video>
</div>

<div id="myYouTubeVideo">
    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY" frameborder="0" allowfullscreen></iframe>
</div>



<script src="node_modules/plyr/dist/plyr.min.js"></script>

<script>
    new Plyr('#myVideoPlayer video');

    new Plyr('#myYouTubeVideo');
</script>