Removed option to turn off links because it messes up controls alignment.

Explained some styles.

test/test.html

@@ -8,7 +8,12 @@
   <script src="../video.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
     VideoJS.DOMReady(function(){
-      var myPlayer = VideoJS.setup("example_video_1", { controlsHiding: false, controlsBelow: true, showControlsAtStart: true });
+      var myPlayer = VideoJS.setup("example_video_1", { 
+        controlsHiding: false, 
+        controlsBelow: false, 
+        showControlsAtStart: true,
+        linksHiding: false,
+      });
       myPlayer.activateControl(document.getElementById("scrub"), "loadProgressBar");
       var vid = document.getElementById("example_video_1"),
           attrTable = document.getElementById("attributes"),
@@ -66,7 +71,7 @@
 
   <!-- Begin VideoJS -->
   <div id="scrub" style="background: #000; height: 10px;"></div>
-  <div class="video-js-box vim-css">
+  <div class="video-js-box">
     <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
     <video data-subtitles="../demo-subtitles.srt" id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
       <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

video-js.css

@@ -4,18 +4,18 @@ Version 1.2.0
 
 REQUIRED STYLES (be careful overriding)
 ================================================================================ */
-
 /* Box containing video, controls, and download links.
+   Will be set to the width of the video element through JS
    If you want to add some kind of frame or special positioning, use another containing element, not video-js-box. */
-.video-js-box { text-align: left; position: relative; line-height: 0; margin: 0; padding: 0;  } /* Will be set to the width of the video element */
+.video-js-box { text-align: left; position: relative; line-height: 0 !important; margin: 0; padding: 0 !important; border: none !important;  }
 
 /* Video Element */
 video.video-js { background-color: #000; position: relative; padding: 0; }
 
-/* Poster Style */
+/* Poster Overlay Style */
-.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; height: 100%; margin: 0; cursor: pointer; }
+.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
 /* Subtiles Style */
-.video-js-box .vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 40px; left: 0; right: 0; position: absolute; }
+.video-js-box .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
 
 /* Fullscreen styles for main elements */
 .video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
@@ -28,9 +28,9 @@ video.video-js { background-color: #000; position: relative; padding: 0; }
 
 /* Styles Loaded Check */
 .vjs-styles-check { height: 5px; position: absolute; }
-.video-js-box.vjs-controls-below .vjs-controls { position: relative; opacity: 1; }
+/* Controls Below Video */
-.video-js-box.vjs-controls-below video { margin: 0 0 0px 0; /* Firefox gap */ }
+.video-js-box.vjs-controls-below .vjs-controls { position: relative; opacity: 1; background-color: #000; }
-
+.video-js-box.vjs-controls-below .vjs-subtitles { bottom: 75px; } /* Account for height of controls below video */
 
 /* DEFAULT SKIN (override in another file)
 ================================================================================
@@ -41,23 +41,22 @@ so you can upgrade to newer versions easier. */
 /* Controls Layout 
   Using absolute positioning to position controls */
 .video-js-box .vjs-controls {
-  position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff;
+  position: absolute; margin: 0; opacity: 0.85; color: #fff;
   display: none; /* Start hidden */
   left: 0; right: 0; /* 100% width of video-js-box */
-  bottom: 0px;
+  bottom: 0px; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
   height: 35px; /* Including any margin you want above or below control items */
-  padding: 0;
+  padding: 0; /* Controls are absolutely position, so no padding necessary */
 }
-/* Controls styles when below the video */
-.video-js-box.vjs-controls-below .vjs-controls { background-color: #000; }
 
 .video-js-box .vjs-controls > div { /* Direct div children of control bar */
-  position: absolute; padding: 0; text-align: center;
+  position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
+  text-align: center; margin: 0; padding: 0;
   height: 25px; /* Default height of individual controls */
-  margin: 0; padding: 0;
   top: 5px; /* Top margin to put space between video and controls when controls are below */
-  
+
-  /* CSS Background Gradients */
+  /* CSS Background Gradients 
+     Using to give the aqua-ish look. */
   /* Default */ background-color: #0B151A;
   /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
   /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;
@@ -69,14 +68,17 @@ so you can upgrade to newer versions easier. */
   box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000;
 }
 
-/* Placement of Control Items */
+/* Placement of Control Items 
-.vjs-controls > div.vjs-play-control       { width: 25px; left: 5px; }
+   - Left side of pogress bar, use left & width
-.vjs-controls > div.vjs-progress-control   { left: 35px; right: 165px; } /* Using left & right so it expands with the width of the video */
+   - Rigth side of progress bar, use right & width
-.vjs-controls > div.vjs-time-control       { width: 75px; right: 90px; } /* Time control and progress bar are combined to look like one */
+   - Expand with the video (like progress bar) use left & right */
-.vjs-controls > div.vjs-volume-control     { width: 50px; right: 35px; }
+.vjs-controls > div.vjs-play-control       { left: 5px;   width: 25px;  }
-.vjs-controls > div.vjs-fullscreen-control { width: 25px; right: 5px; }
+.vjs-controls > div.vjs-progress-control   { left: 35px;  right: 165px; } /* Using left & right so it expands with the width of the video */
+.vjs-controls > div.vjs-time-control       { width: 75px; right: 90px;  } /* Time control and progress bar are combined to look like one */
+.vjs-controls > div.vjs-volume-control     { width: 50px; right: 35px;  }
+.vjs-controls > div.vjs-fullscreen-control { width: 25px; right: 5px;   }
 
-/* Removing curves on progress control and time control to join them. */
+/* Removing curved corners on progress control and time control to join them. */
 .vjs-controls > div.vjs-progress-control {
   border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0;
   border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;
@@ -89,6 +91,7 @@ so you can upgrade to newer versions easier. */
 /* Play/Pause
 -------------------------------------------------------------------------------- */
 .vjs-play-control { cursor: pointer !important; }
+/* Play Icon */
 .vjs-play-control span { display: block; font-size: 0; line-height: 0; }
 .vjs-paused .vjs-play-control span {
   width: 0; height: 0; margin: 8px 0 0 8px;
@@ -116,12 +119,14 @@ so you can upgrade to newer versions easier. */
   border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
 }
 .vjs-play-progress {
+  /* CSS Gradient */
   /* Default */ background: #fff;
   /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
   /* Firefox */ background: -moz-linear-gradient(top,  #fff,  #777);
 }
 .vjs-load-progress {
   opacity: 0.8;
+  /* CSS Gradient */
   /* Default */ background-color: #555;
   /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
   /* Firefox */ background: -moz-linear-gradient(top,  #555,  #aaa);
@@ -160,7 +165,7 @@ so you can upgrade to newer versions easier. */
   margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
   width: 20px; height: 20px;
 }
-/* Drawing the fullscreen icon using 4 li elements */
+/* Drawing the fullscreen icon using 4 span elements */
 .vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
 .vjs-fullscreen-control div span:nth-child(1) { /* Top-left triangle */
   margin-right: 3px; /* Space between top-left and top-right */

video.js

@@ -49,7 +49,6 @@ var VideoJS = _V_ = JRClass.extend({
       controlsHiding: true, // Hide controls when not over the video
       defaultVolume: 0.85, // Will be overridden by localStorage volume if available
       flashVersion: 9, // Required flash version for fallback
-      linksHiding: true, // Hide download links when video is supported
       flashIsDominant: false, // Always use Flash when available
       useBuiltInControls: false, // Dont' use the video JS controls (iPhone)
       players: ["html5", "flashObject", "links"] // Players and order to use them
@@ -991,7 +990,7 @@ var VideoJS = _V_ = JRClass.extend({
   getLinksFallback: function(){ return this.box.getElementsByTagName("P")[0]; },
   // Hide no-video download paragraph
   hideLinksFallback: function(){
-    if (this.options.linksHiding && this.linksFallback) { this.linksFallback.style.display = "none"; }
+    if (this.linksFallback) { this.linksFallback.style.display = "none"; }
   },
   // Hide no-video download paragraph
   showLinksFallback: function(){