From 06b1a88358e69f4182fdd82da998810054f5a88f Mon Sep 17 00:00:00 2001
From: Dan Hersam <dan@hersam.com>
Date: Tue, 27 Jan 2015 17:14:19 -0500
Subject: [PATCH] Added three videos to documentation.

Created shortcode for YouTube videos and made the videos responsive in the
stylesheet.
---
 docs/content/overview/introduction.md    |  4 ++++
 docs/content/overview/quickstart.md      |  2 ++
 docs/content/troubleshooting/overview.md |  2 ++
 docs/layouts/shortcodes/youtube.html     |  4 ++++
 docs/static/css/style.css                | 20 ++++++++++++++++++++
 5 files changed, 32 insertions(+)
 create mode 100644 docs/layouts/shortcodes/youtube.html

diff --git a/docs/content/overview/introduction.md b/docs/content/overview/introduction.md
index 56ad589e1..cfa7f39df 100644
--- a/docs/content/overview/introduction.md
+++ b/docs/content/overview/introduction.md
@@ -37,6 +37,10 @@ build times and the ability to rebuild whenever a change is made, Hugo
 provides a very fast feedback loop. This is essential when you are
 designing websites, but also very useful when creating content.
 
+## How fast is Hugo?
+
+{{% youtube CdiDYZ51a2o %}}
+
 ## What does Hugo do?
 
 In technical terms, Hugo takes a source directory of Markdown files and
diff --git a/docs/content/overview/quickstart.md b/docs/content/overview/quickstart.md
index 3f13b20e2..0b1f292a7 100644
--- a/docs/content/overview/quickstart.md
+++ b/docs/content/overview/quickstart.md
@@ -12,6 +12,8 @@ weight: 10
 
 > _Note: This quickstart depends on features introduced in Hugo v0.11.  If you have an earlier version of Hugo, you will need to [upgrade](/overview/installing/) before proceeding._
 
+{{% youtube w7Ft2ymGmfc %}}
+
 ## Step 1. Install Hugo
 
 Go to [Hugo Releases](https://github.com/spf13/hugo/releases) and download the
diff --git a/docs/content/troubleshooting/overview.md b/docs/content/troubleshooting/overview.md
index 5397604ba..e23e25dd9 100644
--- a/docs/content/troubleshooting/overview.md
+++ b/docs/content/troubleshooting/overview.md
@@ -20,6 +20,8 @@ Here are some examples:
 * [How do I include an image gallery on my website?](http://discuss.gohugo.io/t/image-gallery/594)
 * ... And a lot more!
 
+{{% youtube c8fJIRNChmU %}}
+
 Indeed, you may find many questions and solutions
 to problems in our [discussion forum](http://discuss.gohugo.io/),
 and you may find the [support](http://discuss.gohugo.io/category/support)
diff --git a/docs/layouts/shortcodes/youtube.html b/docs/layouts/shortcodes/youtube.html
new file mode 100644
index 000000000..9b4a37cb9
--- /dev/null
+++ b/docs/layouts/shortcodes/youtube.html
@@ -0,0 +1,4 @@
+<div class="video-container">
+<iframe class="youtube-player" type="text/html" width="100%" height="auto" src="http://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0">
+</iframe>
+</div>
diff --git a/docs/static/css/style.css b/docs/static/css/style.css
index 3b13ff4a0..478134a89 100755
--- a/docs/static/css/style.css
+++ b/docs/static/css/style.css
@@ -531,3 +531,23 @@ i.freebsd-19px:before {
   content: url(/img/freebsd-19px.svg);
   vertical-align: -7%;
 }
+
+/* Responsive videos */
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+    margin: 20px 0;
+}
+ 
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;    
+}