Default dimensions

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';
@@ -274,8 +275,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.getStyleElement('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 +451,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 getStyleElement = 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.getStyleElement('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