phocoder-rails 0.0.33

data/public/javascripts/video-js-2.0.2/README.markdown

@@ -0,0 +1,202 @@
+VideoJS - [HTML5 Video Player](http://videojs.com)
+==================================================
+Version 2.0.2
+
+View [VideoJS.com](http://videojs.com) for a demo and overview.
+
+VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs.
+
+The base of VideoJS is Kroc Camen's [Video for Everybody](http://camendesign.com/code/video_for_everybody), which is a video embed code that falls back to a Flash video player or download links for browsers and devices that don't support HTML5 video.
+
+View demo.html for an example of how to use it.
+
+Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/).
+
+Contributors (Github Username)
+------------------------------
+heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic
+
+
+Getting Started
+---------------
+
+### Step 1: Include VideoJS Javascript and CSS files in your page.
+Change the src/href to the appropriate location on your server.
+
+    <script src="video.js" type="text/javascript" charset="utf-8"></script>
+    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
+
+
+### Step 2: Add the VideoJS setup code to your page or another script.
+Must run after the VideoJS javascript file has been included
+
+    <script type="text/javascript" charset="utf-8">
+
+      // Add VideoJS to all video tags on the page when the DOM is ready
+      VideoJS.setupAllWhenReady();
+
+    </script>
+
+
+### Step 3: Add the VideoJS embed code to your page (grab the latest version for demo.html).
+Change the video and image files to your own. You can even swap out the Flash Fallback for your own, just maintain the "vjs-flash-fallback" class on the object. I know, seems like a lot of HTML, but it's super compatible. [Check it](http://camendesign.com/code/video_for_everybody/test.html).
+
+    <!-- Begin VideoJS -->
+    <div class="video-js-box">
+      <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
+      <video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
+        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
+        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
+        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
+        <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
+        <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
+          data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
+          <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
+          <param name="allowfullscreen" value="true" />
+          <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
+          <!-- Image Fallback. Typically the same as the poster image. -->
+          <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
+            title="No video playback capabilities." />
+        </object>
+      </video>
+      <!-- Download links provided for devices that can't play video in the browser. -->
+      <p class="vjs-no-video"><strong>Download Video:</strong>
+        <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
+        <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
+        <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
+        <!-- Support VideoJS by keeping this link. -->
+        <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
+      </p>
+    </div>
+    <!-- End VideoJS -->
+
+
+Storing a Reference to the Player(s)
+------------------------------------
+You can set up the player(s) in a way that allows you to access it later, and control things like the video playback. In this case, the setup has to happen after the DOM has been loaded. You can use any library's DOM Ready method, or the one built into VideoJS.
+
+### Using a Video's ID or Element
+
+    VideoJS.DOMReady(function(){
+      var myPlayer = VideoJS.setup("example_video_1");
+    });
+
+
+### Using an array of video elements/IDs
+Note: It returns an array of players
+
+    VideoJS.DOMReady(function(){
+      var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
+    });
+
+
+### All videos on the page with the "video-js" class
+
+    VideoJS.DOMReady(function(){
+      var myManyPlayers = VideoJS.setup("All");
+    });
+
+
+### After you have references to your players you can...(example)
+
+    VideoJS.DOMReady(function(){
+      var myPlayer = VideoJS.setup("example_video_1");
+      myPlayer.play(); // Starts playing the video for this player.
+    });
+
+
+Setting Options
+---------------
+Set options when setting up the videos. The defaults are shown here.
+
+    VideoJS.setupAllWhenReady({
+      controlsBelow: false, // Display control bar below video instead of in front of
+      controlsHiding: true, // Hide controls when mouse is not over the video
+      defaultVolume: 0.85, // Will be overridden by user's last volume if available
+      flashPlayerVersion: 9, // Required flash version for fallback
+    });
+
+### Or as the second option of VideoJS.setup
+
+    VideoJS.DOMReady(function(){
+      var myPlayer = VideoJS.setup("example_video_1", {
+        // Same options
+      });
+    });
+
+
+Coming Next
+-----------
+- API to Flash fallback
+
+Changelog
+---------
+2.0.2 (2010-12-10)
+
+- Feature: Rewrote and optimized subtitle code.
+- Feature: Protecting against volume ranges outside of 1 and 0.
+- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.
+
+2.0.1 (2010-11-22)
+
+- Fix: Issue with big play button when multiple videos are on the page.
+- Fix: Optimized play progress tracking.
+- Fix: Optimized buffer progress checking.
+- Fix: Firefox not showing Flash fallback object.
+
+2.0.0 (2010-11-21)
+
+- Feature: Created "behaviors" concept for adding behaviors to elements
+- Feature: Switched back to divs for controls, for more portable styles
+- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"]
+- Feature: Created playerType concept, for initializing different platforms
+- Feature: Added play button for Android
+- Feature: Added spinner for iPad (non-fullscreen)
+- Feature: Split into multiple files for easier development
+- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion
+- Fix: Checking for m3u8 files (Apple HTTP Streaming)
+- Fix: Catching error on localStorage full that safari seems to randomly throw
+- Fix: Scrubbing to end doesn't trigger onEnded
+
+1.1.5 (2010-11-09)
+
+- Feature: Switched to track method for setting subtitles. Now works like spec.
+- Feature: Created "players" concept for defining fallbacks and fallback order
+- Fix: Android playback bug.
+- Fix: Massive reorganization of code to make easier to navigate
+
+1.1.4 (2010-11-06)
+
+- Feature: Added loading spinner.
+- Feature: Improved styles loaded checking.
+- Feature: Added volume() function to get and set volume through the player.
+- Fix: Fix issue where FF would loop video in background when ended.
+- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
+- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
+- Fix: Updated to show links if only unplayable sources and no Flash.
+- Fix: Issue where if play button was loaded after play, it wouldn't hide.
+
+1.1.3 (2010-10-19)
+
+- Feature: Width/Height functions for resizing the player
+- Feature: Made initial click & hold trigger new value on progress and volume
+- Feature: Made controls not hide when hovering over them
+- Feature: Added big play button as default starting control.
+- Fix: Removed trailing comma that was breaking IE7
+- Fix: Removed some vars from global scope
+- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
+- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime.
+- Fix: Safari error on unloaded video
+
+1.1.2 (2010-09-20)
+
+- Added a fix for the poster bug in iPad/iPhone
+- Added more specificity to styles
+
+1.1.1 (2010-09-14)
+
+- First Formally Versioned Release
+  
+1.0.0 (2010-05-18)
+
+- First released

data/public/javascripts/video-js-2.0.2/demo-subtitles.srt

@@ -0,0 +1,13 @@
+1
+00:00:02,400 --> 00:00:05,200
+[Background Music Playing]
+
+2
+00:00:15,712 --> 00:00:17,399
+Heay!!
+
+3
+00:00:25,712 --> 00:00:30,399
+[Bird noises]
+
+

data/public/javascripts/video-js-2.0.2/demo.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>HTML5 Video Player</title>
+
+  <!-- Include the VideoJS Library -->
+  <script src="video.js" type="text/javascript" charset="utf-8"></script>
+
+  <script type="text/javascript">
+    // Must come after the video.js library
+
+    // Add VideoJS to all video tags on the page when the DOM is ready
+    VideoJS.setupAllWhenReady();
+
+    /* ============= OR ============ */
+
+    // Setup and store a reference to the player(s).
+    // Must happen after the DOM is loaded
+    // You can use any library's DOM Ready method instead of VideoJS.DOMReady
+
+    /*
+    VideoJS.DOMReady(function(){
+      
+      // Using the video's ID or element
+      var myPlayer = VideoJS.setup("example_video_1");
+      
+      // OR using an array of video elements/IDs
+      // Note: It returns an array of players
+      var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
+
+      // OR all videos on the page
+      var myManyPlayers = VideoJS.setup("All");
+
+      // After you have references to your players you can...(example)
+      myPlayer.play(); // Starts playing the video for this player.
+    });
+    */
+
+    /* ========= SETTING OPTIONS ========= */
+
+    // Set options when setting up the videos. The defaults are shown here.
+
+    /*
+    VideoJS.setupAllWhenReady({
+      controlsBelow: false, // Display control bar below video instead of in front of
+      controlsHiding: true, // Hide controls when mouse is not over the video
+      defaultVolume: 0.85, // Will be overridden by user's last volume if available
+      flashVersion: 9, // Required flash version for fallback
+      linksHiding: true // Hide download links when video is supported
+    });
+    */
+
+    // Or as the second option of VideoJS.setup
+    
+    /*
+    VideoJS.DOMReady(function(){
+      var myPlayer = VideoJS.setup("example_video_1", {
+        // Same options
+      });
+    });
+    */
+
+  </script>
+
+  <!-- Include the VideoJS Stylesheet -->
+  <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS">
+</head>
+<body>
+
+  <!-- Begin VideoJS -->
+  <div class="video-js-box">
+    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
+    <video 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"' />
+      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
+      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
+      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
+      <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
+        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
+        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
+        <param name="allowfullscreen" value="true" />
+        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
+        <!-- Image Fallback. Typically the same as the poster image. -->
+        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
+          title="No video playback capabilities." />
+      </object>
+    </video>
+    <!-- Download links provided for devices that can't play video in the browser. -->
+    <p class="vjs-no-video"><strong>Download Video:</strong>
+      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
+      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
+      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
+      <!-- Support VideoJS by keeping this link. -->
+      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
+    </p>
+  </div>
+  <!-- End VideoJS -->
+
+</body>
+</html>

data/public/javascripts/video-js-2.0.2/skins/hu.css

@@ -0,0 +1,116 @@
+/*
+VideoJS HuCSS Skin (http://videojs.com)
+Version 2.0.0
+*/
+
+.hu-css .vjs-controls {
+  height: 47px; opacity: 0.95; color: #fff;
+  background: #3A3835;
+}
+.hu-css.video-js-box.vjs-controls-below .vjs-controls { background: #3A3835; }
+
+.hu-css .vjs-controls > div {
+  top: 0;
+  background: none;
+  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
+  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
+}
+
+/* Top Level Items */
+.hu-css .vjs-controls > div.vjs-play-control,
+.hu-css .vjs-controls > div.vjs-volume-control,
+.hu-css .vjs-controls > div.vjs-fullscreen-control {
+  bottom: 20px; height: 27px;
+}
+/* Bottom Level Items */
+.hu-css .vjs-controls > div.vjs-progress-control, .hu-css .vjs-controls > div.vjs-time-control {
+  margin-top: 28px; height: 19px;
+}
+
+/* Placement of Control Items */
+.hu-css .vjs-controls > div.vjs-play-control       { width: 33px; left: 0px; }
+.hu-css .vjs-controls > div.vjs-progress-control   { width: left: 84px; right: 0; }
+.hu-css .vjs-controls > div.vjs-time-control       { width: 84px; left: 0px; }
+.hu-css .vjs-controls > div.vjs-volume-control     { width: 43px; right: 44px; }
+.hu-css .vjs-controls > div.vjs-fullscreen-control { width: 43px; right: 0px; }
+
+/* Play/Pause
+-------------------------------------------------------------------------------- */
+.hu-css.vjs-paused .vjs-play-control span { margin: 9px 0 0 12px; }
+.hu-css.vjs-playing .vjs-play-control span { margin: 9px 0 0 12px; }
+.hu-css .vjs-play-control:hover { background-color: #000; }
+
+/* Progress
+-------------------------------------------------------------------------------- */
+.hu-css .vjs-progress-holder { /* Box containing play and load progresses */
+  height: 19px; border: none;
+  margin: 0px 0px 0 0px; /* Placement within the progress control item */
+  background: #000;
+  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
+}
+.hu-css .vjs-progress-holder div { height: 13px; margin-top: 3px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
+.hu-css .vjs-play-progress {
+  /* Default */ background: #777;
+  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
+  /* Firefox */ background: -moz-linear-gradient(top,  #999,  #777);
+}
+.hu-css .vjs-load-progress { background: #555; }
+
+/* Time Display
+-------------------------------------------------------------------------------- */
+.hu-css .vjs-controls .vjs-time-control { font-size: 11px; background: #000; }
+.hu-css .vjs-controls .vjs-time-control span { line-height: 19px; /* Centering vertically */ }
+
+/* Volume
+-------------------------------------------------------------------------------- */
+/*.hu-css .vjs-volume-control:hover { background-color: #000; }*/
+.hu-css .vjs-volume-control div { margin: 0 5px 0 5px; padding: 9px 0 0 0; }
+.hu-css .vjs-volume-control div span { /* Individual volume bars */
+  margin: 0 2px 0 0; /* Space between */
+  width: 3px; height: 0px; /* Total height is height + bottom border */
+  border-bottom: 12px solid #555; /* Default (off) color and height of visible portion */
+}
+.hu-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
+/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
+.hu-css .vjs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 10px; }
+.hu-css .vjs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 8px; }
+.hu-css .vjs-volume-control div span:nth-child(3) { border-bottom-width: 6px; height: 6px; }
+.hu-css .vjs-volume-control div span:nth-child(4) { border-bottom-width: 8px; height: 4px; }
+.hu-css .vjs-volume-control div span:nth-child(5) { border-bottom-width: 10px; height: 2px; }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.hu-css .vjs-fullscreen-control:hover { background-color: #000; }
+.hu-css .vjs-fullscreen-control div { margin: 8px 0 0 0px; padding-left: 13px; height: 13px; border-left: 1px solid #555; }
+.hu-css .vjs-fullscreen-control div span:nth-child(1) { margin-right: 9px; margin-bottom: 5px; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
+.hu-css .vjs-fullscreen-control div span:nth-child(2) { border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
+.hu-css .vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 9px 0 0; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
+.hu-css .vjs-fullscreen-control div span:nth-child(4) { border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
+/* Icon when video is in fullscreen mode */
+.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
+.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
+.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
+.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.hu-css div.vjs-big-play-button {
+  width: 76px; height: 70px; margin: -35px 0 0 -38px;
+  border: 1px solid #ccc; opacity: 0.8;
+  border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;
+
+  background: rgba(50,50,50,0.8);
+
+  /* CSS Shadows */
+  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
+}
+.hu-css div.vjs-big-play-button:hover {
+  box-shadow: 0px 0px 80px #fff; -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff;
+}
+.hu-css div.vjs-big-play-button span {
+  margin: 16px 0 0 21px;
+  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
+  border-left: 40px solid #fff; /* Width & Color of play icon */
+  /* Height of play icon is total top & bottom border widths. Color is transparent. */
+  border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
+}

data/public/javascripts/video-js-2.0.2/skins/tube.css

@@ -0,0 +1,111 @@
+/*
+VideoJS TubeCSS Skin (http://videojs.com)
+Version 2.0.0
+*/
+
+.tube-css .vjs-controls {
+  opacity: 1; color: #000;
+  height: 24px;
+  bottom: 0;
+  background-color: #ccc;
+  background: #fcfcfc -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#d0d0d0)) left top;
+  background: #fcfcfc -moz-linear-gradient(top,  #fcfcfc,  #d0d0d0) left top;
+}
+
+.tube-css .vjs-controls > div {
+  height: 23px; margin: 0; background: none; top: 0;
+  border: 1px solid #b1b1b1; border-left-color: #eee;
+  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
+  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
+}
+
+/* Placement of Control Items */
+.tube-css .vjs-controls > div.vjs-play-control       { width: 25px; left: 0; }
+.tube-css .vjs-controls > div.vjs-progress-control   { left: 102px; right: 83px; }
+.tube-css .vjs-controls > div.vjs-time-control       { width: 75px; left: 27px; }
+.tube-css .vjs-controls > div.vjs-volume-control     { width: 50px; right: 30px; }
+.tube-css .vjs-controls > div.vjs-fullscreen-control { width: 30px; right: 0; }
+
+/* Removing borders on time & progress to join them */
+.tube-css .vjs-controls > div.vjs-progress-control { border-left: none; }
+.tube-css .vjs-controls > div.vjs-time-control { border-right: none; }
+
+
+/* Play/Pause
+-------------------------------------------------------------------------------- */
+.tube-css .vjs-play-control { margin-left: 0; border-left-color: #b1b1b1; }
+.tube-css.vjs-paused  .vjs-play-control span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
+.tube-css.vjs-playing .vjs-play-control span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; }
+.tube-css.vjs-paused  .vjs-play-control:hover span { border-left-color: #CF1A1A; }
+.tube-css.vjs-playing .vjs-play-control:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
+
+/* Time Display
+-------------------------------------------------------------------------------- */
+.tube-css .vjs-controls .vjs-time-control { font-size: 11px; }
+.tube-css .vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
+
+/* Progress
+-------------------------------------------------------------------------------- */
+.tube-css .vjs-progress-holder {
+  margin-right: 10px;
+  background-color: #b1b1b1;
+  background: #b1b1b1 -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#cacaca)) left top;
+  background: #b1b1b1 -moz-linear-gradient(top,  #b1b1b1,  #cacaca) left top;
+  border-color: #CACACA; border-bottom-color: #eaeaea;
+  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
+}
+.tube-css .vjs-progress-control .vjs-load-progress { background: #C89191; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
+.tube-css .vjs-progress-control .vjs-play-progress { background: #f33; background: -webkit-gradient(linear, left top, left bottom, from(#f33), to(#CF1A1A)); background: -moz-linear-gradient(top,  #f33,  #CF1A1A); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
+
+/* Volume
+-------------------------------------------------------------------------------- */
+.tube-css .vjs-volume-control div { padding: 3px 0 0 0; }
+.tube-css .vjs-volume-control div span { border-bottom-color: #ccc; }
+/* Volume icon color */
+.tube-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #333; }
+/* Volume icon hovering color */
+.tube-css .vjs-volume-control:hover div span.vjs-volume-level-on { border-color: #CF1A1A; }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.tube-css .vjs-fullscreen-control div { margin: 4px 0 0 8px; }
+/* Fullscreen icon color */
+.tube-css .vjs-fullscreen-control div span:nth-child(3), .tube-css .vjs-fullscreen-control div span:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) {
+  border-bottom-color: #333;
+}
+.tube-css .vjs-fullscreen-control div span:nth-child(1), .tube-css .vjs-fullscreen-control div span:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) {
+  border-top-color: #333;
+}
+/* Fullscreen icon hovering color */
+.tube-css .vjs-fullscreen-control:hover div span:nth-child(3), .tube-css .vjs-fullscreen-control:hover div span:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(2) {
+  border-bottom-color: #CF1A1A;
+}
+.tube-css .vjs-fullscreen-control:hover div span:nth-child(1), .tube-css .vjs-fullscreen-control:hover div span:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(4) {
+  border-top-color: #CF1A1A;
+}
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.tube-css div.vjs-big-play-button { 
+  width: 84px; height: 58px; margin: -29px 0 0 -42px;
+  border: 2px solid #ccc; opacity: 0.9;
+  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
+
+  /* CSS Background Gradients */
+  /* Default */ background-color: #333;
+  /* Webkit  */ background: #000 -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)) left 29px;
+  /* Firefox */ background: #000 -moz-linear-gradient(top,  #000,  #333) left 29px;
+
+  /* CSS Shadows */
+  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
+}
+.tube-css div.vjs-big-play-button:hover {
+  opacity: 1;
+}
+.tube-css div.vjs-big-play-button span {
+  margin: 11px 0 0 26px;
+  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
+  border-left: 36px solid #fff; /* Width & Color of play icon */
+  /* Height of play icon is total top & bottom border widths. Color is transparent. */
+  border-top: 18px solid rgba(0,0,0,0); border-bottom: 18px solid rgba(0,0,0,0);
+}