Updated docs for site. Add 'projects' to gitignore.

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 dist/*
-dev.html
+dev.html
+projects

build/files/demo.html

@@ -14,8 +14,8 @@
   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
       poster="http://video-js.zencoder.com/oceans-clip.png"
       data-setup="">
-    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
-    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
+    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
+    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   </video>
 
 </body>

docs/api.md

@@ -1,28 +1,45 @@
+---
+layout: docs
+title: API
+description: Video.JS API Docs
+body_id: docs
+---
+
 API
 ===
-The VideoJS API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video or any number of media playback technologies that have an API wrapper (e.g. video-js.flowplayer.js).
+The VideoJS API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video or any other supported playback technologies.
 
 Referencing the Player
 ----------------------
 To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID (example_video_2, example_video_3, etc.).
 
-    _V_("example_video_1")
+{% highlight javascript %}
+
+  var myPlayer = _V_("example_video_1");
+
+{% endhighlight %}
 
 
-Wait until Ready
-----------------
+Wait Until the Player is Ready
+------------------------------
 The time it takes VideoJS to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
 
+{% highlight javascript %}
+
     _V_("example_video_1").ready(function(){
 
       var myPlayer = this;
 
+      // EXAMPLE: Start playing the video.
+      myPlayer.play();
+
     });
 
+{% endhighlight %}
 
 API Methods
 -----------
-Now that you have access to a ready player, you can control the video or react to video events using the following functions. The VideoJS API function names follow the HTML5 media API. The main difference is that attributes which you would get or set on a video element directly ( videoElement.currentTime = "120"; ), you would use a function syntax for VideoJS ( myPlayer.currentTime(120); )
+Now that you have access to a ready player, you can control the video or react to video events using the following functions. The VideoJS API function names follow the HTML5 media API. The main difference is that attributes which you would get or set on a video element directly ( videoElement.currentTime = "120"; ), you would use a function argument syntax for VideoJS ( myPlayer.currentTime(120); )
 
 ### play()
   Start video playback.
@@ -53,13 +70,13 @@ Now that you have access to a ready player, you can control the video or react t
 
 
 ### duration()
-  Returns the length in time of the video in seconds. Note: The video must have started loading before the duration can be known.
+  Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
   Example:
 
     var howLongIsThis = myPlayer.duration();
 
 ### buffered()
-  Returns a [TimeRange](http://videojs.com/docs/timerange.html) with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
+  Returns a [TimeRange](http://videojs.com/docs/glossary.html#timerange) with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
   Example:
 
     var whatHasBeenBuffered = myPlayer.buffered();

docs/behaviors.md

@@ -1,3 +1,12 @@
+---
+layout: docs
+title: Behvaiors
+description: Video.JS Behaviors
+body_id: docs
+---
+
+DEPRECATED
+
 Behaviors
 =========
 Behaviors allow you to make an element on your page act as a video control or a display of video information. The easiest example of this is creating a play button. The following code will make a click on your element play the video.

docs/glossary.md

@@ -1,3 +1,11 @@
+---
+layout: docs
+title: VideoJS Glossary
+description: Video.JS Glossary
+body_id: docs
+---
+
+
 Glossary
 ========
 
@@ -6,4 +14,33 @@ The container of elements on the page that must be loaded before you can interac
 http://en.wikipedia.org/wiki/Document_Object_Model
 
 ### Flash Fallback
-The Flash video player (SWF) used to play a video when HTML5 isn't supported.
+The Flash video player (SWF) used to play a video when HTML5 isn't supported.
+
+<a name="timerange"></a>
+### TimeRange
+
+<a name="html5-video"></a>
+### HTML5 Video
+HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.
+
+Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.
+
+A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).
+
+<a name="video-tag"></a>
+### Video Tag
+There are a number of great resources that will give you an introduction to the video tag an how it is used including:
+
+  - [Dive into HTML5](http://diveintohtml5.org/video.html)
+  - Lynda.com's ['HTML5 Video and Audio in Depth'](http://www.lynda.com/HTML-5-tutorials/HTML5-Video-and-Audio-in-Depth/80781-2.html) video tutorials created by yours truly.
+
+An if you really want to dig in, you can read the (W3C Spec)[http://www.w3.org/TR/html5/video.html]. (Warning - not for the faint of heart)
+
+
+<a name="skin"></a>
+### Skin
+"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.
+
+<a name="cdn"></a>
+### Content Delivery Network (CDN)
+A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.

docs/index.md

@@ -0,0 +1,8 @@
+---
+layout: docs
+title: Docs
+description: Video.JS Docs
+body_id: docs
+---
+
+Intro

docs/options.md

@@ -1,2 +1,9 @@
+---
+layout: docs
+title: Options
+description: Player Options
+body_id: docs
+---
+
 Options
 =======

docs/setup.md

@@ -1,3 +1,10 @@
+---
+layout: docs
+title: Setup
+description: Setup
+body_id: docs
+---
+
 Setup
 =====
 

docs/tech.md

@@ -1,3 +1,10 @@
+---
+layout: docs
+title: Playback Technology
+description: Video.JS Playback Technology
+body_id: docs
+---
+
 Playback Technology ("Tech")
 ============================
 Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, VideoJS.swf, etc. (not just "Flash").