videojs-ima fixed style units

[mysuf]

How to reproduce this issue:
change font-size of .video-js and play non-linear ad from Google IMA example tags

Example of problematic code:

.video-js.vjs-paused .bumpable-ima-ad-container, .video-js.vjs-playing:hover .bumpable-ima-ad-container, .video-js.vjs-user-active.vjs-playing .bumpable-ima-ad-container {
   margin-top: -40px;
}

How to fix this issue:
Use font relative units. For example in case above it should be margin-top: -3em; (or around this value)

As videojs use em units, most of sizes and offsets is related to base font-size of .video-js. So plugins should use same approach to be responsive. You can inspire with native .vjs-text-track-display overlayer.

[shawnbuso]

Thanks for the report - I'll take a look and make the change once I verify that it doesn't break other stuff.

[mysuf]

@shawnbuso
Now I also faced issue related to bounds of videojs player. Your overlayer overflows player's top bound.

How to reproduce this issue:
Put two players in column without any gap. Bottom will block control bar of the top player by overlayer of bottom player.

How to fix this issue:
You should either use variable height of this overlayer like .vjs-text-track-display does or if you need preserve fixed height, apply overflow: hidden to entire player like .video-js { overflow: hidden }.

[shawnbuso]

This sounds like a separate issue than the first one - could you open a new issue for this so we can track them separately? Thanks!