diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md index 2aaa85ac..1d6702d8 100644 --- a/docs/_docs/14-helpers.md +++ b/docs/_docs/14-helpers.md @@ -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 diff --git a/docs/_posts/2017-01-23-layout-header-video.md b/docs/_posts/2017-01-23-layout-header-video.md index 5df1a9bd..9054e157 100644 --- a/docs/_posts/2017-01-23-layout-header-video.md +++ b/docs/_posts/2017-01-23-layout-header-video.md @@ -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' -|--- +| Parameter | Required | Description | +|---------- |--------- | ----------- | +| `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,18 +40,21 @@ 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: video: id: 97649261 provider: vimeo -``` - -{% include responsive_video id="97649261" provider="vimeo" %} - +``` \ No newline at end of file diff --git a/test/_posts/2017-01-23-layout-header-video.md b/test/_posts/2017-01-23-layout-header-video.md new file mode 100644 index 00000000..9054e157 --- /dev/null +++ b/test/_posts/2017-01-23-layout-header-video.md @@ -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 +``` \ No newline at end of file