From 3a40b10fa6a4af00847809debd71c3763555e229 Mon Sep 17 00:00:00 2001
From: Nathaniel Bibler <git@nathanielbibler.com>
Date: Fri, 20 Nov 2015 17:38:05 -0500
Subject: [PATCH] @nbibler ensured classes begin with alpha characters. Fixes
 #2828. closes #2829

---
 CHANGELOG.md             |  1 +
 src/js/player.js         |  8 +++++++-
 test/unit/player.test.js | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d87abc122d..f4ef35748e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@ CHANGELOG
 
 ## HEAD (Unreleased)
 * @DatTran fixed bower paths. Fixes #2740 ([view](https://github.com/videojs/video.js/pull/2775))
+* @nbibler ensured classes begin with alpha characters. Fixes #2828 ([view](https://github.com/videojs/video.js/pull/2829))
 
 --------------------
 
diff --git a/src/js/player.js b/src/js/player.js
index 5277a72efd..cc8dc0f6fd 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -415,6 +415,7 @@ class Player extends Component {
     let width;
     let height;
     let aspectRatio;
+    let idClass;
 
     // The aspect ratio is either used directly or to calculate width and height.
     if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
@@ -451,7 +452,12 @@ class Player extends Component {
       height = width  * ratioMultiplier;
     }
 
-    let idClass = this.id()+'-dimensions';
+    // Ensure the CSS class is valid by starting with an alpha character
+    if (/^[^a-zA-Z]/.test(this.id())) {
+      idClass = 'dimensions-'+this.id();
+    } else {
+      idClass = this.id()+'-dimensions';
+    }
 
     // Ensure the right class is still on the player for the style element
     this.addClass(idClass);
diff --git a/test/unit/player.test.js b/test/unit/player.test.js
index 377074178f..5298161e1b 100644
--- a/test/unit/player.test.js
+++ b/test/unit/player.test.js
@@ -199,6 +199,21 @@ test('should set the width, height, and aspect ratio via a css class', function(
   ok(confirmSetting('padding-top', '25%'), 'aspect ratio percent should match the newly set aspect ratio');
 });
 
+test('should use an class name that begins with an alpha character', function(){
+  let alphaPlayer = TestHelpers.makePlayer({ id: 'alpha1' });
+  let numericPlayer = TestHelpers.makePlayer({ id: '1numeric' });
+
+  let getStyleText = function(styleEl){
+    return (styleEl.styleSheet && styleEl.styleSheet.cssText) || styleEl.innerHTML;
+  };
+
+  alphaPlayer.width(100);
+  numericPlayer.width(100);
+
+  ok(/\s*\.alpha1-dimensions\s*\{/.test(getStyleText(alphaPlayer.styleEl_)), 'appends -dimensions to an alpha player ID');
+  ok(/\s*\.dimensions-1numeric\s*\{/.test(getStyleText(numericPlayer.styleEl_)), 'prepends dimensions- to a numeric player ID');
+});
+
 test('should wrap the original tag in the player div', function(){
   var tag = TestHelpers.makeTag();
   var container = document.createElement('div');