vjs-styles-defaults override defaults and cause page reflow

[hartman]

I'm using videojs to progressively enhance my video elements. Unfortunately this is causing significant page reflows, which will impact the render speed of my pages. A requirement for these problems is to asynchronously load your javascript.

• Problem one is that the video-js containers switch my players from inline-block to block. This causes page reflows for inlined elements. I can reset this in my own CSS, but I shouldn't have to.
• Second problem is vertical-alignment: top, which causes a redraw for inline elements. I can reset this in my own CSS, but I shouldn't have to.
• Third problem is the default size. This has higher specificity then my elements attributes. This is a problem, because the time by which my CSS is loaded and the defaults get applied to

This last one is really annoying to workaround. I cannot reset these defaults to 'initial' with pure CSS, because the per player classes with the correct w/h (which are added much later during player initialization), wouldn't have high enough specificity anymore. So really the only way to fix this is by using an inline style attribute and then after videojs setup remove that style attribute, which is... less then desirable.

There has to be a better way to deal with this... I'm reserving this space in my canvas for a reason (exactly to prevent reflows of the layout). To have the wrapping div ignore my original wish seems stupid. It this only to accommodate those who forget to reserve canvas area using the HTML attributes? In that case, why not set these fallback values as the last step of the players initialization, in case nothing else has set a width/height.

[hartman]

Rolling a private patch for now to counter this:
https://phabricator.wikimedia.org/diffusion/ETMH/browse/master/patches/videojs.defaults.patch

[gkatsev]

Going to close this a duplicate of #3051 just because it currently has the action item. It should be fixed as part of that.