Critical CSS breaking with Video JS Player

[nathanworking]

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();
  });
}

[nathanworking]

Just an update on my own testing:

I confirmed that with everything being exactly the same and changing out Video.js for Plyr (https://plyr.io/) everything works an expected.