Critical CSS breaking with Video JS Player

Anyone had issues specifically with the Video JS player? (https://videojs.com/)

For some reason, I can't get my critical CSS to generate correctly with Video JS. Everytime I do a build it processes and gives my inline CSS but the actual styles in the video player are messed up - there's a lot of hidden elements that never show.

I didn't have this problem with Plyr (https://plyr.io/) and nothing else on any of my sites are having this issue - it's just the Video JS elements.

Any ideas?

I can put togehter a full example if needed, here's my critical CSS task in my Gulp file:

```
// Process the critical path CSS one at a time
function processCriticalCSS(element, i, callback) {
const criticalSrc = pkg.urls.critical + element.url;
const criticalDest = pkg.paths.templates + element.template + "_critical.min.css";

let criticalWidth = 1200;
let criticalHeight = 1200;
if (element.template.indexOf("amp_") !== -1) {
criticalWidth = 600;
criticalHeight = 19200;
}
$.fancyLog("-> Generating critical CSS: " + $.chalk.cyan(criticalSrc) + " -> " + $.chalk.magenta(criticalDest));
$.critical.generate({
src: criticalSrc,
// 'target' instead of 'dest' for critical V3+
target: criticalDest,
penthouse: {
blockJSRequests: false,
forceInclude: pkg.globs.criticalWhitelist
},
inline: false,
ignore: [],
css: [
pkg.paths.dist.css + pkg.vars.siteCssName,
],
minify: true,
extract: true,
width: criticalWidth,
height: criticalHeight
}, (err, output) => {
if (err) {
$.fancyLog($.chalk.magenta(err));
}
callback();
});
}
```