border-box and padding-bottom kills the posterImage

[scottconnerly]

Problem:
http://codepen.io/scottconnerly/pen/GcAkf
box-sizing: border-box; (very common) in combination with using a padding-bottom (to get responsively sized videos) breaks the poster image, most notably after the video plays. videojs.posterImage.show() fails to show the poster in this case.

Hackney solution:
http://codepen.io/scottconnerly/pen/DKGHE
forcing .video-js to have box-sizing: content-box and then manually setting the height and margin-bottom of the .vjs-poster.

[mmcc]

We're still discussing the changes necessary to actually support responsive design if you have any input there: #982

The quick fix I've been telling people to go with is absolute positioning set to the 4 corners, like below, but it looks like your solution works fine as well.

.vjs-poster {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}