From 45ef92414b59f8e19756d6da2df364971fb14274 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 9 Feb 2016 14:23:00 -0500 Subject: [PATCH 01/12] Don't add style elements if VIDEOJS_NO_BASE_THEME is set to true --- src/js/player.js | 14 ++++++++++---- src/js/video.js | 31 +++++++++++++++++-------------- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/js/player.js b/src/js/player.js index ae72ca1136..1354b077cc 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -286,10 +286,12 @@ class Player extends Component { // Add a style element in the player that we'll use to set the width/height // of the player in a way that's still overrideable by CSS, just like the // video element - this.styleEl_ = stylesheet.createStyleElement('vjs-styles-dimensions'); - let defaultsStyleEl = Dom.$('.vjs-styles-defaults'); - let head = Dom.$('head'); - head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild); + if (window.VIDEOJS_NO_BASE_THEME !== true) { + this.styleEl_ = stylesheet.createStyleElement('vjs-styles-dimensions'); + let defaultsStyleEl = Dom.$('.vjs-styles-defaults'); + let head = Dom.$('head'); + head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild); + } // Pass in the width/height/aspectRatio options which will update the style el this.width(this.options_.width); @@ -423,6 +425,10 @@ class Player extends Component { * @method updateStyleEl_ */ updateStyleEl_() { + if (window.VIDEOJS_NO_BASE_THEME === true) { + return; + } + let width; let height; let aspectRatio; diff --git a/src/js/video.js b/src/js/video.js index c4529c2612..2491168f95 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -1,6 +1,7 @@ /** * @file video.js */ +import window from 'global/window'; import document from 'global/document'; import * as setup from './setup'; import * as stylesheet from './utils/stylesheet.js'; @@ -99,21 +100,23 @@ let videojs = function(id, options, ready){ }; // Add default styles -let style = Dom.$('.vjs-styles-defaults'); -if (!style) { - style = stylesheet.createStyleElement('vjs-styles-defaults'); - let head = Dom.$('head'); - head.insertBefore(style, head.firstChild); - stylesheet.setTextContent(style, ` - .video-js { - width: 300px; - height: 150px; - } +if (window.VIDEOJS_NO_BASE_THEME !== true) { + let style = Dom.$('.vjs-styles-defaults'); + if (!style) { + style = stylesheet.createStyleElement('vjs-styles-defaults'); + let head = Dom.$('head'); + head.insertBefore(style, head.firstChild); + stylesheet.setTextContent(style, ` + .video-js { + width: 300px; + height: 150px; + } - .vjs-fluid { - padding-top: 56.25% - } - `); + .vjs-fluid { + padding-top: 56.25% + } + `); + } } // Run Auto-load players From cdd631a044d7fdc5c83943ff316bb8c9a6b8820b Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 10 Feb 2016 15:09:11 -0500 Subject: [PATCH 02/12] Add player tests to verify VIDEOJS_NO_BASE_THEME --- test/unit/player.test.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/test/unit/player.test.js b/test/unit/player.test.js index d99caf2130..cf2a8ccc4b 100644 --- a/test/unit/player.test.js +++ b/test/unit/player.test.js @@ -951,3 +951,29 @@ test('Remove waiting class on timeupdate after tech waiting', function() { player.trigger('timeupdate'); ok(!/vjs-waiting/.test(player.el().className), 'vjs-waiting is removed from the player el on timeupdate'); }); + +test('Make sure that player\'s style el respects VIDEOJS_NO_BASE_THEME option', function() { + // clear the HEAD before running this test + let styles = document.querySelectorAll('style'); + let i = styles.length; + while (i--) { + let style = styles[i]; + style.parentNode.removeChild(style); + } + + let tag = TestHelpers.makeTag(); + tag.id = 'vjs-no-base-theme-tag'; + tag.width = 600; + tag.height = 300; + + window.VIDEOJS_NO_BASE_THEME = true; + let player = TestHelpers.makePlayer({}, tag); + styles = document.querySelectorAll('style'); + equal(styles.length, 0, 'we should not get any style elements included in the DOM'); + + window.VIDEOJS_NO_BASE_THEME = false; + player = TestHelpers.makePlayer({}, tag); + styles = document.querySelectorAll('style'); + equal(styles.length, 1, 'we should have one style element in the DOM'); + equal(styles[0].className, 'vjs-styles-dimensions', 'the class name is the one we expected'); +}); From 3ffd8c39ebc7e4d22fae9b1f601ebcb7f6233132 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 10 Feb 2016 15:23:37 -0500 Subject: [PATCH 03/12] Add section about default style elements in vjs --- docs/guides/skins.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/guides/skins.md b/docs/guides/skins.md index 4f3060b3ed..0dc6286ed8 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -4,9 +4,19 @@ Skins The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding the styles you'd like to change. -If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = false` before Video.js is loaded. Keep in mind that without these base styles +If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. Keep in mind that without these base styles enabled, you'll need to manually include them. +## Default style elements +Video.js uses a couple of dynamically, specifically, there's a default styles element as well as a player dimensions style element. +They are used to provide extra default flexiblity with styling the player. However, in a lot of cases, users do not want this. +When `window.VIDEOJS_NO_BASE_THEME` is set to `true`, videojs will *not* include these element in the page. +This means that default dimensions and configured player dimensions will *not* be applied. +For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_BASE_THEME === true`: +```html + +``` + ## Icons You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) in the sandbox directory. From 22f3788b72ab659c7c92518a3c710460a697b53e Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 10 Feb 2016 15:24:43 -0500 Subject: [PATCH 04/12] Fixup markdown for skins guide --- docs/guides/skins.md | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/docs/guides/skins.md b/docs/guides/skins.md index 0dc6286ed8..ddf701a42a 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -1,11 +1,13 @@ Skins ===== -The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding +The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), +and by default these styles are added to the dom for you! +That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding the styles you'd like to change. -If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. Keep in mind that without these base styles -enabled, you'll need to manually include them. +If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. +Keep in mind that without these base styles enabled, you'll need to manually include them. ## Default style elements Video.js uses a couple of dynamically, specifically, there's a default styles element as well as a player dimensions style element. @@ -19,12 +21,13 @@ For example, the following player will end up having a width and height of 0 whe ## Icons -You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) in the sandbox directory. +You can view all of the icons available in the base theme by renaming and viewing +[`icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) in the sandbox directory. ## Customization -When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. You should include a new class matching the -name of your theme, then just start overriding! +When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. +You should include a new class matching the name of your theme, then just start overriding! ```css .vjs-skin-hotdog-stand { color: #FF0000; } @@ -32,8 +35,12 @@ name of your theme, then just start overriding! .vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; } ``` -This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), but you can skin any other aspect. -Our suggestion is to use a browser such as Firefox and Chrome, and use the developer tools to inspect the different elements and see what you'd like to change and what classes +This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), +but you can skin any other aspect. +Our suggestion is to use a browser such as Firefox and Chrome, +and use the developer tools to inspect the different elements and see what you'd like to change and what classes to target when you do so. -More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins). +More custom skins will be available for download soon. +If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), +and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins). From 9e570ff4564b3d96dea62d2e0b6f7c26a9418a31 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 14 Mar 2016 14:53:45 -0400 Subject: [PATCH 05/12] rename to VIDEOJS_NO_DYNAMIC_STYLE --- docs/guides/skins.md | 21 ++++++++++++--------- src/js/player.js | 4 ++-- src/js/video.js | 2 +- test/unit/player.test.js | 6 +++--- 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/docs/guides/skins.md b/docs/guides/skins.md index ddf701a42a..b76e392956 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -1,6 +1,17 @@ Skins ===== +## Default style elements +Video.js uses a couple of dynamically, specifically, there's a default styles element as well as a player dimensions style element. +They are used to provide extra default flexiblity with styling the player. However, in a lot of cases, users do not want this. +When `window.VIDEOJS_NO_DYNAMIC_STYLE` is set to `true`, videojs will *not* include these element in the page. +This means that default dimensions and configured player dimensions will *not* be applied. +For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_DYNAMIC_STYLE === true`: +```html + +``` + +## Base Skin The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding @@ -8,16 +19,8 @@ the styles you'd like to change. If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. Keep in mind that without these base styles enabled, you'll need to manually include them. +Video.js does not currently include the base skin automatically yet, so, this option isn't necessary. -## Default style elements -Video.js uses a couple of dynamically, specifically, there's a default styles element as well as a player dimensions style element. -They are used to provide extra default flexiblity with styling the player. However, in a lot of cases, users do not want this. -When `window.VIDEOJS_NO_BASE_THEME` is set to `true`, videojs will *not* include these element in the page. -This means that default dimensions and configured player dimensions will *not* be applied. -For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_BASE_THEME === true`: -```html - -``` ## Icons diff --git a/src/js/player.js b/src/js/player.js index 1354b077cc..37e69b7f82 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -286,7 +286,7 @@ class Player extends Component { // Add a style element in the player that we'll use to set the width/height // of the player in a way that's still overrideable by CSS, just like the // video element - if (window.VIDEOJS_NO_BASE_THEME !== true) { + if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) { this.styleEl_ = stylesheet.createStyleElement('vjs-styles-dimensions'); let defaultsStyleEl = Dom.$('.vjs-styles-defaults'); let head = Dom.$('head'); @@ -425,7 +425,7 @@ class Player extends Component { * @method updateStyleEl_ */ updateStyleEl_() { - if (window.VIDEOJS_NO_BASE_THEME === true) { + if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) { return; } diff --git a/src/js/video.js b/src/js/video.js index 2491168f95..fe56a56ff6 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -100,7 +100,7 @@ let videojs = function(id, options, ready){ }; // Add default styles -if (window.VIDEOJS_NO_BASE_THEME !== true) { +if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) { let style = Dom.$('.vjs-styles-defaults'); if (!style) { style = stylesheet.createStyleElement('vjs-styles-defaults'); diff --git a/test/unit/player.test.js b/test/unit/player.test.js index cf2a8ccc4b..5bdeeac710 100644 --- a/test/unit/player.test.js +++ b/test/unit/player.test.js @@ -952,7 +952,7 @@ test('Remove waiting class on timeupdate after tech waiting', function() { ok(!/vjs-waiting/.test(player.el().className), 'vjs-waiting is removed from the player el on timeupdate'); }); -test('Make sure that player\'s style el respects VIDEOJS_NO_BASE_THEME option', function() { +test('Make sure that player\'s style el respects VIDEOJS_NO_DYNAMIC_STYLE option', function() { // clear the HEAD before running this test let styles = document.querySelectorAll('style'); let i = styles.length; @@ -966,12 +966,12 @@ test('Make sure that player\'s style el respects VIDEOJS_NO_BASE_THEME option', tag.width = 600; tag.height = 300; - window.VIDEOJS_NO_BASE_THEME = true; + window.VIDEOJS_NO_DYNAMIC_STYLE = true; let player = TestHelpers.makePlayer({}, tag); styles = document.querySelectorAll('style'); equal(styles.length, 0, 'we should not get any style elements included in the DOM'); - window.VIDEOJS_NO_BASE_THEME = false; + window.VIDEOJS_NO_DYNAMIC_STYLE = false; player = TestHelpers.makePlayer({}, tag); styles = document.querySelectorAll('style'); equal(styles.length, 1, 'we should have one style element in the DOM'); From 779395697a99fb9521527dc64162d49a9ec5980b Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 14 Mar 2016 15:07:14 -0400 Subject: [PATCH 06/12] apply width/height to tech attributes if VIDEOJS_NO_DYNAMIC_STYLE is enabled --- src/js/player.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/js/player.js b/src/js/player.js index 37e69b7f82..e49e1a3677 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -426,6 +426,18 @@ class Player extends Component { */ updateStyleEl_() { if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) { + let {width_: width = this.options_.width, height_: height = this.options_.width} = this; + let techEl = this.tech_ && this.tech_.el(); + + if (techEl) { + if (width) { + techEl.width = width; + } + if (height) { + techEl.height = height; + } + } + return; } From 8a7519e69269025a04da0556da880b51168b7604 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 14 Mar 2016 15:10:57 -0400 Subject: [PATCH 07/12] Add a note about Player#width and Player#height --- docs/guides/skins.md | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/guides/skins.md b/docs/guides/skins.md index b76e392956..bd49ad2690 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -1,6 +1,16 @@ Skins ===== +## Base Skin +The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), +and by default these styles are added to the dom for you! +That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding +the styles you'd like to change. + +If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. +Keep in mind that without these base styles enabled, you'll need to manually include them. +Video.js does not currently include the base skin automatically yet, so, this option isn't necessary. + ## Default style elements Video.js uses a couple of dynamically, specifically, there's a default styles element as well as a player dimensions style element. They are used to provide extra default flexiblity with styling the player. However, in a lot of cases, users do not want this. @@ -11,15 +21,9 @@ For example, the following player will end up having a width and height of 0 whe ``` -## Base Skin -The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), -and by default these styles are added to the dom for you! -That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding -the styles you'd like to change. - -If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. -Keep in mind that without these base styles enabled, you'll need to manually include them. -Video.js does not currently include the base skin automatically yet, so, this option isn't necessary. +### `Player#width` and `Player#height` +When `VIDEOJS_NO_DYNAMIC_STYLE` is set, `Player#width` and `Player#height` will apply any width and height +that is set directly to the video element (or whatever element the current tech uses). ## Icons From f0cf8b1ad682c672d4249d340fcfb1536cf8ffe3 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 14 Mar 2016 15:19:02 -0400 Subject: [PATCH 08/12] Add a unit test for the new width/height functionality --- test/unit/player.test.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/test/unit/player.test.js b/test/unit/player.test.js index 5bdeeac710..6b29f5ba6f 100644 --- a/test/unit/player.test.js +++ b/test/unit/player.test.js @@ -977,3 +977,31 @@ test('Make sure that player\'s style el respects VIDEOJS_NO_DYNAMIC_STYLE option equal(styles.length, 1, 'we should have one style element in the DOM'); equal(styles[0].className, 'vjs-styles-dimensions', 'the class name is the one we expected'); }); + +test('When VIDEOJS_NO_DYNAMIC_STYLE is set, apply sizing directly to the tech el', function() { + // clear the HEAD before running this test + let styles = document.querySelectorAll('style'); + let i = styles.length; + while (i--) { + let style = styles[i]; + style.parentNode.removeChild(style); + } + + let tag = TestHelpers.makeTag(); + tag.id = 'vjs-no-base-theme-tag'; + tag.width = 600; + tag.height = 300; + + window.VIDEOJS_NO_DYNAMIC_STYLE = true; + let player = TestHelpers.makePlayer({}, tag); + + player.width(300); + player.height(600); + equal(player.tech_.el().width, 300, 'the width is equal to 300'); + equal(player.tech_.el().height, 600, 'the height is equal 600'); + + player.width(600); + player.height(300); + equal(player.tech_.el().width, 600, 'the width is equal to 600'); + equal(player.tech_.el().height, 300, 'the height is equal 300'); +}); From c7d8309ba9b998834bf1d887783f4d45a5227161 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 14 Mar 2016 15:34:42 -0400 Subject: [PATCH 09/12] ignore some es6 code for jshint --- src/js/player.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/player.js b/src/js/player.js index e49e1a3677..c14e12dec3 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -426,6 +426,7 @@ class Player extends Component { */ updateStyleEl_() { if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) { + /* jshint ignore:start */ let {width_: width = this.options_.width, height_: height = this.options_.width} = this; let techEl = this.tech_ && this.tech_.el(); @@ -437,6 +438,7 @@ class Player extends Component { techEl.height = height; } } + /* jshint ignore:end */ return; } From 39bfc62383f12926ce8f5b9b850c0288232cb446 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 15 Mar 2016 13:58:08 -0400 Subject: [PATCH 10/12] make sure that values of 0 for width and height can be used --- src/js/player.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/js/player.js b/src/js/player.js index c14e12dec3..626337e460 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -426,19 +426,18 @@ class Player extends Component { */ updateStyleEl_() { if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) { - /* jshint ignore:start */ - let {width_: width = this.options_.width, height_: height = this.options_.width} = this; + const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width; + const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height; let techEl = this.tech_ && this.tech_.el(); if (techEl) { - if (width) { + if (width >= 0) { techEl.width = width; } - if (height) { + if (height >= 0) { techEl.height = height; } } - /* jshint ignore:end */ return; } From ddb97bf567f7691ab0b127edb5e6471c53807de7 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 15 Mar 2016 14:11:56 -0400 Subject: [PATCH 11/12] code review comments --- docs/guides/skins.md | 9 +++++---- src/js/video.js | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/guides/skins.md b/docs/guides/skins.md index bd49ad2690..295641aa1c 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -3,22 +3,23 @@ Skins ## Base Skin The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), -and by default these styles are added to the dom for you! +and by default these styles are added to the DOM for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding the styles you'd like to change. If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. Keep in mind that without these base styles enabled, you'll need to manually include them. + Video.js does not currently include the base skin automatically yet, so, this option isn't necessary. ## Default style elements -Video.js uses a couple of dynamically, specifically, there's a default styles element as well as a player dimensions style element. +Video.js uses a couple of style elements dynamically, specifically, there's a default styles element as well as a player dimensions style element. They are used to provide extra default flexiblity with styling the player. However, in a lot of cases, users do not want this. -When `window.VIDEOJS_NO_DYNAMIC_STYLE` is set to `true`, videojs will *not* include these element in the page. +When `window.VIDEOJS_NO_DYNAMIC_STYLE` is set to `true`, video.js will *not* include these element in the page. This means that default dimensions and configured player dimensions will *not* be applied. For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_DYNAMIC_STYLE === true`: ```html - + ``` ### `Player#width` and `Player#height` diff --git a/src/js/video.js b/src/js/video.js index fe56a56ff6..74d7101e99 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -102,6 +102,7 @@ let videojs = function(id, options, ready){ // Add default styles if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) { let style = Dom.$('.vjs-styles-defaults'); + if (!style) { style = stylesheet.createStyleElement('vjs-styles-defaults'); let head = Dom.$('head'); From 23dbaf33e3871b8ca445b529718c216bbb9c0125 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 15 Mar 2016 16:38:27 -0400 Subject: [PATCH 12/12] Add an example of a case --- docs/guides/skins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/skins.md b/docs/guides/skins.md index 295641aa1c..2ecdcb47a2 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -14,7 +14,7 @@ Video.js does not currently include the base skin automatically yet, so, this op ## Default style elements Video.js uses a couple of style elements dynamically, specifically, there's a default styles element as well as a player dimensions style element. -They are used to provide extra default flexiblity with styling the player. However, in a lot of cases, users do not want this. +They are used to provide extra default flexiblity with styling the player. However, in some cases, like if a user has the HEAD tag managed by React, users do not want this. When `window.VIDEOJS_NO_DYNAMIC_STYLE` is set to `true`, video.js will *not* include these element in the page. This means that default dimensions and configured player dimensions will *not* be applied. For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_DYNAMIC_STYLE === true`: