Azure Media Player controls missing css classes

Question

I have a component using Azure Media Player (my videos have AES encryption) and when I set the controls property to true all I have is a lot of giant letter through the screen:

If I inspect these giant letters, I can see css classes (like vjs-remaining-time-display) that don't exist in the amp css file:

How could it be possible for the player to create elements with classes that don't exist? How can I fix this?

Thanks.

For those who want to reproduce, problem can be seen here: https://codepen.io/ricardogaefke/pen/eYxaGgO or you can clone https://github.com/RicardoGaefke/azuremediaplayer.git.

All you need after cloning is running npm install and npm run dev.

Answer 1

It worked when I just replaced:

      <video
        id="videoAMP"
        ref={videoAMPRef}
      />

with:

      <video
        id="videoAMP"
        ref={videoAMPRef}
        className="azuremediaplayer amp-big-play-centered amp-default-skin"
      />