diff --git a/src/js/player.js b/src/js/player.js index b95606bf09..3ba8a6d8ce 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -496,7 +496,7 @@ class Player extends Component { } /** - * Add/remove the vjs-fluid class + * Get/set fluid mode * * @param {Boolean} bool Value of true adds the class, value of false removes the class */ @@ -512,6 +512,8 @@ class Player extends Component { } else { this.removeClass('vjs-fluid'); } + + this.updateStyleEl_(); } /** @@ -568,7 +570,7 @@ class Player extends Component { if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') { // Use any aspectRatio that's been specifically set aspectRatio = this.aspectRatio_; - } else if (this.videoWidth()) { + } else if (this.videoWidth() > 0) { // Otherwise try to get the aspect ratio from the video metadata aspectRatio = this.videoWidth() + ':' + this.videoHeight(); } else { @@ -2623,6 +2625,10 @@ class Player extends Component { const tagOptions = Dom.getElAttributes(tag); const dataSetup = tagOptions['data-setup']; + if (Dom.hasElClass(tag, 'vjs-fluid')) { + tagOptions.fluid = true; + } + // Check if data-setup attr exists. if (dataSetup !== null) { // Parse options JSON diff --git a/test/unit/player.test.js b/test/unit/player.test.js index efa724c3e2..2e4af3a12b 100644 --- a/test/unit/player.test.js +++ b/test/unit/player.test.js @@ -191,6 +191,22 @@ QUnit.test('should set the width, height, and aspect ratio via a css class', fun player.dispose(); }); +QUnit.test('should default to 16:9 when fluid', function(assert) { + const player = TestHelpers.makePlayer({fluid: true}); + + assert.equal(player.currentHeight() / player.currentWidth(), 0.5625, 'fluid player without dimensions defaults to 16:9'); +}); + +QUnit.test('should set fluid to true if element has vjs-fluid class', function(assert) { + const tag = TestHelpers.makeTag(); + + tag.className += ' vjs-fluid'; + + const player = TestHelpers.makePlayer({}, tag); + + assert.ok(player.fluid(), 'fluid is true with vjs-fluid class'); +}); + 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' });