Improve video helper documentation
This commit is contained in:
Michael Rose
parent
66c154e37f
commit
638c11b773
3 changed files with 126 additions and 20 deletions
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,11 +40,17 @@ 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:
|
||||||
|
|
@ -46,6 +58,3 @@ header:
|
||||||
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
60
test/_posts/2017-01-23-layout-header-video.md
Normal 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
|
||||||
|
```
|
||||||
Loading…
Reference in a new issue