shithub: hugo

Info  •  Files  •  Log  •  Branches

Added three videos to documentation.

Created shortcode for YouTube videos and made the videos responsive in the
stylesheet.

--- a/docs/content/overview/introduction.md

+++ b/docs/content/overview/introduction.md

@@ -37,6 +37,10 @@

 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

--- a/docs/content/overview/quickstart.md

+++ b/docs/content/overview/quickstart.md

@@ -12,6 +12,8 @@

 > _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

--- a/docs/content/troubleshooting/overview.md

+++ b/docs/content/troubleshooting/overview.md

@@ -20,6 +20,8 @@

 * [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)

--- /dev/null

+++ b/docs/layouts/shortcodes/youtube.html

@@ -1,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>

--- a/docs/static/css/style.css

+++ b/docs/static/css/style.css

@@ -531,3 +531,23 @@

   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%;    

+}