feat(fill): make vjs-fill a player mode

src/js/player.js

@@ -649,9 +649,13 @@ class Player extends Component {
       head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
     }
 
+    this.fill_ = false;
+    this.fluid_ = false;
+
     // Pass in the width/height/aspectRatio options which will update the style el
     this.width(this.options_.width);
     this.height(this.options_.height);
+    this.fill(this.options_.fill);
     this.fluid(this.options_.fluid);
     this.aspectRatio(this.options_.aspectRatio);
 
@@ -762,10 +766,12 @@ class Player extends Component {
   /**
    * A getter/setter/toggler for the vjs-fluid `className` on the `Player`.
    *
+   * Turning this on will turn off fill mode.
+   *
    * @param {boolean} [bool]
    *        - A value of true adds the class.
    *        - A value of false removes the class.
-   *        - No value will toggle the fluid class.
+   *        - No value will be a getter.
    *
    * @return {boolean|undefined}
    *         - The value of fluid when getting.
@@ -780,13 +786,43 @@ class Player extends Component {
 
     if (bool) {
       this.addClass('vjs-fluid');
+      this.fill(false);
     } else {
       this.removeClass('vjs-fluid');
     }
 
     this.updateStyleEl_();
   }
 
+  /**
+   * A getter/setter/toggler for the vjs-fill `className` on the `Player`.
+   *
+   * Turning this on will turn off fluid mode.
+   *
+   * @param {boolean} [bool]
+   *        - A value of true adds the class.
+   *        - A value of false removes the class.
+   *        - No value will be a getter.
+   *
+   * @return {boolean|undefined}
+   *         - The value of fluid when getting.
+   *         - `undefined` when setting.
+   */
+  fill(bool) {
+    if (bool === undefined) {
+      return !!this.fill_;
+    }
+
+    this.fill_ = !!bool;
+
+    if (bool) {
+      this.addClass('vjs-fill');
+      this.fluid(false);
+    } else {
+      this.removeClass('vjs-fill');
+    }
+  }
+
   /**
    * Get/Set the aspect ratio
    *
@@ -3655,6 +3691,9 @@ class Player extends Component {
     const tagOptions = Dom.getAttributes(tag);
     const dataSetup = tagOptions['data-setup'];
 
+    if (Dom.hasClass(tag, 'vjs-fill')) {
+      tagOptions.fill = true;
+    }
     if (Dom.hasClass(tag, 'vjs-fluid')) {
       tagOptions.fluid = true;
     }

test/unit/player.test.js

@@ -404,6 +404,18 @@ QUnit.test('should set fluid to true if element has vjs-fluid class', function(a
   player.dispose();
 });
 
+QUnit.test('should set fill to true if element has vjs-fill class', function(assert) {
+  const tag = TestHelpers.makeTag();
+
+  tag.className += ' vjs-fill';
+
+  const player = TestHelpers.makePlayer({}, tag);
+
+  assert.ok(player.fill(), 'fill is true with vjs-fill class');
+
+  player.dispose();
+});
+
 QUnit.test('should use an class name that begins with an alpha character', function(assert) {
   const alphaPlayer = TestHelpers.makePlayer({ id: 'alpha1' });
   const numericPlayer = TestHelpers.makePlayer({ id: '1numeric' });