N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve video helper documentation

Browse source
This commit is contained in:
Michael Rose 2017-01-24 10:09:38 -05:00
parent 66c154e37f
commit 638c11b773
3 changed files with 126 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
docs/_docs/14-helpers.md
View file

@ -189,15 +189,52 @@ And then drop-in the feature row include in the body where you'd like it to appe
**More Feature Row Goodness:** A [few more examples]({{ "/splash-page/" | absolute_url }}) and [source code](https://github.com/{{ site.repository }}/blob/master/docs/_pages/splash-page.md) can be seen in the demo site. **More Feature Row Goodness:** A [few more examples]({{ "/splash-page/" | absolute_url }}) and [source code](https://github.com/{{ site.repository }}/blob/master/docs/_pages/splash-page.md) can be seen in the demo site.
{: .notice--info} {: .notice--info}
## Video ## Responsive Video Embed
Embed a responsive video from YouTube or Vimeo. Embed a video from YouTube or Vimeo that responsively sizes to fit the width of its parent.
| Parameter | Required | Description |
|---------- |--------- | ----------- |
| `id` | **Required** | ID of the video |
| `provider` | **Required** | Hosting provider of the video, either `youtube` or `vimeo` |
### YouTube
To embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or page's main content you'd use:
```liquid ```liquid
{% raw %}{% include responsive_video id="97649261" provider="vimeo" %}{% endraw %} {% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %}
``` ```
{% include responsive_video id="97649261" provider="vimeo" %} {% include video id="XsxDH4HcOWA" provider="youtube" %}
To embed it as a video header you'd use the following YAML Front Matter
```yaml
header:
video:
id: XsxDH4HcOWA
provider: youtube
```
### Vimeo
To embed the following Vimeo video at url `https://vimeo.com/97649261` into a post or page's main content you'd use:
```liquid
{% raw %}{% include video id="97649261" provider="vimeo" %}{% endraw %}
```
{% include video id="97649261" provider="vimeo" %}
To embed it as a video header you'd use the following YAML Front Matter
```yaml
header:
video:
id: 97649261
provider: vimeo
```
## Table of Contents ## Table of Contents

41
docs/_posts/2017-01-23-layout-header-video.md
View file

@ -12,20 +12,26 @@ tags:
- layout - layout
--- ---
This post should display a **header with a reponsive video**, if the theme supports it. This post should display a **header with a responsive video**, if the theme supports it.
## Settings ## Settings
|--- | Parameter | Required | Description |
| Parameter | Required | Description | |---------- |--------- | ----------- |
|-|- | `id` | **Required** | ID of the video |
| `id` | **Required** | ID of the video | `provider` | **Required** | Hosting provider of the video, either `youtube` or `vimeo` |
| `provider` | **Required** | Hosting provider of the video, either 'youtube' or 'vimeo'
|---
## YouTube ### YouTube
Here is a YouTube example for the video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version): To embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or page's main content you'd use:
```liquid
{% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %}
```
{% include video id="XsxDH4HcOWA" provider="youtube" %}
To embed it as a video header you'd use the following YAML Front Matter
```yaml ```yaml
header: header:
@ -34,18 +40,21 @@ header:
provider: youtube provider: youtube
``` ```
{% include responsive_video id="XsxDH4HcOWA" provider="youtube" %} ### Vimeo
## Vimeo To embed the following Vimeo video at url `https://vimeo.com/97649261` into a post or page's main content you'd use:
Here is a Vimeo example for the video at url `https://vimeo.com/97649261`: ```liquid
{% raw %}{% include video id="97649261" provider="vimeo" %}{% endraw %}
```
{% include video id="97649261" provider="vimeo" %}
To embed it as a video header you'd use the following YAML Front Matter
```yaml ```yaml
header: header:
video: video:
id: 97649261 id: 97649261
provider: vimeo provider: vimeo
``` ```
{% include responsive_video id="97649261" provider="vimeo" %}

60
test/_posts/2017-01-23-layout-header-video.md Normal file
View file

@ -0,0 +1,60 @@
---
title: "Layout: Header Video"
header:
video:
id: XsxDH4HcOWA
provider: youtube
categories:
- Layout
- Uncategorized
tags:
- video
- layout
---
This post should display a **header with a responsive video**, if the theme supports it.
## Settings
| Parameter | Required | Description |
|---------- |--------- | ----------- |
| `id` | **Required** | ID of the video |
| `provider` | **Required** | Hosting provider of the video, either `youtube` or `vimeo` |
### YouTube
To embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or page's main content you'd use:
```liquid
{% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %}
```
{% include video id="XsxDH4HcOWA" provider="youtube" %}
To embed it as a video header you'd use the following YAML Front Matter
```yaml
header:
video:
id: XsxDH4HcOWA
provider: youtube
```
### Vimeo
To embed the following Vimeo video at url `https://vimeo.com/97649261` into a post or page's main content you'd use:
```liquid
{% raw %}{% include video id="97649261" provider="vimeo" %}{% endraw %}
```
{% include video id="97649261" provider="vimeo" %}
To embed it as a video header you'd use the following YAML Front Matter
```yaml
header:
video:
id: 97649261
provider: vimeo
```