Upated to new version.

video-js/video-js.css

@@ -1,5 +1,8 @@
 .video-js-box { text-align: left; position: relative; z-index: 1000; }
-.video-js { background-color: #000; }
+video.video-js { background-color: #000; }
+
+.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
+.video-js-box.vjs-fullscreen video.video-js { position: absolute; width: 100%; height: 100%; }
 
 /* General controls styles */
 .vjs-controls { display: none; list-style: none; margin: 0; padding: 0; position: absolute; height: 30px; opacity: 0.85; color: #fff; }
@@ -14,6 +17,7 @@
   background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;
   -moz-box-shadow: 0px 1px 3px #000; 
 }
+
 .vjs-controls > li:last-child { margin-right: 0; }
 .vjs-controls > li:first-child { margin-left: 5px; }
 
@@ -51,7 +55,7 @@
 .vjs-fullscreen-control ul li:nth-child(2) { border: none; border-top: 6px solid #fff; border-left: 6px solid #273F3E; }
 .vjs-fullscreen-control ul li:nth-child(3) { clear: both; margin: 0 3px 0 0; border: none; border-bottom: 6px solid #fff; border-right: 6px solid #112129; }
 .vjs-fullscreen-control ul li:nth-child(4) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #112129; }
-.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #273F3E; }
+.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #273F3E; }
-.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #273F3E; }
+.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #273F3E; }
-.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid #112129; }
+.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid #112129; }
-.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid #112129; }
+.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid #112129; }

video-js/video.js

@@ -12,6 +12,8 @@ var VideoJS = Class.extend({
   // num: the current player's position in the videoJSPlayers array
   init: function(element, num){
     this.video = element;
+    this.num = num;
+    this.box = element.parentNode;
 
     this.buildController();
     this.showController();
@@ -365,29 +367,14 @@ var VideoJS = Class.extend({
   // Real fullscreen isn't available in browsers quite yet.
   fullscreenOn: function(){
     this.videoIsFullScreen = true;
-    this.videoOrigWidth = this.video.offsetWidth;
-    this.videoOrigHeight = this.video.offsetHeight;
     this.docOrigOverflow = document.documentElement.style.overflow;
 
     // Hide any scroll bars
     document.documentElement.style.overflow = 'hidden';
     this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active";
-
+    this.box.className = "video-js-box vjs-fullscreen";
-    // Watch for when the window is resized and resize the video to match.
+    
-    this.fullWindowResize = window.addEventListener('resize', this.sizeToWindow.context(this), false);
-
     // Resize the video to the window
-    this.sizeToWindow();
-  },
-
-  // Resize the video to the full window
-  sizeToWindow: function(){
-    this.video.style.width = window.innerWidth + "px";
-    this.video.style.height = window.innerHeight + "px";
-    this.video.style.position = "fixed";
-    this.video.style.left = 0;
-    this.video.style.top = 0;
-    this.controls.style.position = "fixed";
     this.positionController();
   },
 
@@ -399,15 +386,14 @@ var VideoJS = Class.extend({
     document.documentElement.style.overflow = this.docOrigOverflow;
 
     // Remove window resizing event listener
-    window.removeEventListener('resize', this.sizeToWindow.context(this), false);
+    window.removeEventListener('resize', this.fullWindowResize, false);
 
     // Resize to original settings
-    this.video.style.width = this.videoOrigWidth + "px";
-    this.video.style.height = this.videoOrigHeight + "px";
     this.video.style.position = "static";
     this.controls.style.position = "absolute";
     this.positionController();
     this.fullscreenControl.className = "vjs-fullscreen-control";
+    this.box.className = "video-js-box";
   },
 
   // Attempt to block the ability to select text while dragging controls