How can I replace embedded styles being applied by VideoJS?

Question

Our website is following a strict Content Security Policy.

style-src https: 'nonce-<nonce_value>'
script-src https: 'nonce-<nonce_value>

videojs.js calculates the video player dimensions and appends them into embedded styles such as width and height into a style tag with the class - vjs-styles-dimensions. We need these styles to be applied.

<style class="vjs-styles-defaults">
  .video-js {
    width: 300px;
    height: 150px;
  }

  .vjs-fluid {
    padding-top: 56.25%
  }
</style>
<style class="vjs-styles-dimensions">
  .<videoId>-dimensions {
    width: 300px;
    height: 168.75px;
  }

  .<videoId>-dimensions.vjs-fluid {
    padding-top: 56.25%;
  }
</style>

One way to do this was to add a nonce value to the javascript logic where these styles are created but that would mean we have to alter the library code which is not a good practice.

Could someone please suggest an alternative?