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.
{: .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
{% 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

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

@ -12,20 +12,26 @@ tags:
- 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
|---
| Parameter | Required | Description |
|-|-
| `id` | **Required** | ID of the video
| `provider` | **Required** | Hosting provider of the video, either 'youtube' or 'vimeo'
|---
|---------- |--------- | ----------- |
| `id` | **Required** | ID of the video |
| `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
header:
@ -34,11 +40,17 @@ header:
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
header:
@ -46,6 +58,3 @@ header:
id: 97649261
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
```