Added three videos to documentation.

Created shortcode for YouTube videos and made the videos responsive in the
stylesheet.
This commit is contained in:
Dan Hersam 2015-01-27 17:14:19 -05:00 committed by bep
parent e52a76f559
commit 06b1a88358
5 changed files with 32 additions and 0 deletions

View file

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

View file

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

View file

@ -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)

View file

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

View file

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