Switched to box-sizing:border-box for all player elements

This doesn't immediately break anything (I know of) because the controls
were originally designed to work in both border-box and content-box
environments. Extra elements were added to create internally padding.

This does open the door for some simplification of the HTML, though the extra
elements could still be useful for extra skin design options.

closes #2082
closes #1444

CHANGELOG.md

@@ -16,6 +16,7 @@ CHANGELOG
 * @gkatsev removed event.isDefaultPrevented in favor of event.defaultPrevented ([view](https://github.com/videojs/video.js/pull/2081))
 * @heff added and `extends` function for external subclassing ([view](https://github.com/videojs/video.js/pull/2078))
 * @forbesjo added the `scrubbing` property ([view](https://github.com/videojs/video.js/pull/2080))
+* @heff switched to border-box sizing for all player elements ([view](https://github.com/videojs/video.js/pull/2082))
 
 --------------------
 

src/css/components/_layout.scss

@@ -1,5 +1,7 @@
 .video-js {
-  display: border-box;
+  display: block;
+  box-sizing: border-box;
+
   color: $primary-text;
   background-color: $primary-bg;
   position: relative;
@@ -28,6 +30,13 @@
   }
 }
 
+/* All elements inherit border-box sizing */
+.video-js *,
+.video-js *:before,
+.video-js *:after {
+  box-sizing: inherit;
+}
+
 /* Playback technology elements expand to the width/height of the containing div
 <video> or <object> */
 .video-js .vjs-tech {