@gkatsev moved default and player dimensions to style els at the top of HEAD. closes #2482

CHANGELOG.md

@@ -99,6 +99,7 @@ CHANGELOG
 * @mmcc added type=button to button components ([view](https://github.com/videojs/video.js/pull/2471))
 * @mmcc Fixed IE by using setAttribute to set 'type' property ([view](https://github.com/videojs/video.js/pull/2487))
 * @misternoneill fixed vertical slider issues ([view](https://github.com/videojs/video.js/pull/2469))
+* @gkatsev moved default and player dimensions to style els at the top of HEAD ([view](https://github.com/videojs/video.js/pull/2482))
 
 --------------------
 

src/css/components/_layout.scss

@@ -7,11 +7,6 @@
   vertical-align: top;
   box-sizing: border-box;
 
-  /* Default to the video element width/height. This will be overridden by
-   * the source width height unless changed elsewhere. */
-  width: 300px;
-  height: 150px;
-
   color: $primary-text;
   background-color: $primary-bg;
   position: relative;

src/js/player.js

@@ -15,6 +15,7 @@ import log from './utils/log.js';
 import toTitleCase from './utils/to-title-case.js';
 import { createTimeRange } from './utils/time-ranges.js';
 import { bufferedPercent } from './utils/buffer.js';
+import * as stylesheet from './utils/stylesheet.js';
 import FullscreenApi from './fullscreen-api.js';
 import MediaError from './media-error.js';
 import safeParseTuple from 'safe-json-parse/tuple';
@@ -222,6 +223,10 @@ class Player extends Component {
     // prevent dispose from being called twice
     this.off('dispose');
 
+    if (this.styleEl_) {
+      this.styleEl_.parentNode.removeChild(this.styleEl_);
+    }
+
     // Kill reference to this player
     Player.players[this.id_] = null;
     if (this.tag && this.tag.player) { this.tag.player = null; }
@@ -274,8 +279,10 @@ 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_ = document.createElement('style');
-    el.appendChild(this.styleEl_);
+    this.styleEl_ = stylesheet.createStyleElement('vjs-styles-dimensions');
+    let defaultsStyleEl = document.querySelector('.vjs-styles-defaults');
+    let head = document.querySelector('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);
@@ -448,17 +455,16 @@ class Player extends Component {
     // Ensure the right class is still on the player for the style element
     this.addClass(idClass);
 
-    // Create the width/height CSS
-    var css = `.${idClass} { width: ${width}px; height: ${height}px; }`;
-    // Add the aspect ratio CSS for when using a fluid layout
-    css += `.${idClass}.vjs-fluid { padding-top: ${ratioMultiplier  * 100}%; }`;
+    stylesheet.setTextContent(this.styleEl_, `
+      .${idClass} {
+        width: ${width}px;
+        height: ${height}px;
+      }
 
-    // Update the style el
-    if (this.styleEl_.styleSheet){
-      this.styleEl_.styleSheet.cssText = css;
-    } else {
-      this.styleEl_.innerHTML = css;
-    }
+      .${idClass}.vjs-fluid {
+        padding-top: ${ratioMultiplier * 100}%;
+      }
+    `);
   }
 
   /**

src/js/utils/stylesheet.js

@@ -0,0 +1,16 @@
+import document from 'global/document';
+
+export let createStyleElement = function(className) {
+  let style = document.createElement('style');
+  style.className = className;
+
+  return style;
+};
+
+export let setTextContent = function(el, content) {
+  if (el.styleSheet) {
+    el.styleSheet.cssText = content;
+  } else {
+    el.textContent = content;
+  }
+};

src/js/video.js

@@ -3,6 +3,7 @@
  */
 import document from 'global/document';
 import * as setup from './setup';
+import * as stylesheet from './utils/stylesheet.js';
 import Component from './component';
 import EventTarget from './event-target';
 import Player from './player';
@@ -94,6 +95,16 @@ var videojs = function(id, options, ready){
   return tag['player'] || new Player(tag, options, ready);
 };
 
+// Add default styles
+let style = stylesheet.createStyleElement('vjs-styles-defaults');
+let head = document.querySelector('head');
+head.insertBefore(style, head.firstChild);
+stylesheet.setTextContent(style, `
+  .video-js {
+    width: 300px;
+    height: 150px;
+`);
+
 // Run Auto-load players
 // You have to wait at least once in case this script is loaded after your video in the DOM (weird behavior only with minified version)
 setup.autoSetupTimeout(1, videojs);

test/unit/player.test.js

@@ -172,7 +172,6 @@ test('should set the width, height, and aspect ratio via a css class', function(
   };
 
   // Initial state
-  ok(player.styleEl_.parentNode === player.el(), 'player has a style element');
   ok(!getStyleText(player.styleEl_), 'style element should be empty when the player is given no dimensions');
 
   // Set only the width