Add page hero video for vimeo/youtube using embedresponsively.com code (#788)

This commit is contained in:
Justin Too 2017-01-24 06:29:34 -08:00 committed by Michael Rose
parent 22a4b3d0b7
commit 65a6654582
10 changed files with 146 additions and 5 deletions

View file

@ -0,0 +1,4 @@
{% capture video_id %}{{ page.header.video.id }}{% endcapture %}
{% capture video_provider %}{{ page.header.video.provider }}{% endcapture %}
{% include responsive_video id=video_id provider=video_provider %}

View file

@ -0,0 +1,11 @@
{% capture video_id %}{{ include.id }}{% endcapture %}
{% capture video_provider %}{{ include.provider }}{% endcapture %}
<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">
{% if video_provider == "vimeo" %}
<iframe src="http://player.vimeo.com/video/{{ video_id }}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
{% elsif video_provider == "youtube" %}
<iframe src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
{% endif %}
</div>

View file

@ -4,6 +4,8 @@ layout: default
{% if page.header.overlay_color or page.header.overlay_image or page.header.image %} {% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
{% include page__hero.html %} {% include page__hero.html %}
{% elsif page.header.video.id and page.header.video.provider %}
{% include page__hero_video.html %}
{% endif %} {% endif %}
{% if page.url != "/" and site.breadcrumbs %} {% if page.url != "/" and site.breadcrumbs %}
@ -71,4 +73,4 @@ layout: default
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>

View file

@ -479,4 +479,27 @@ a.reversefootnote {
table, tr, td { table, tr, td {
border: 0; /* remove table borders widget */ border: 0; /* remove table borders widget */
} }
} }
/*
Responsive Video Embed
========================================================================== */
.responsive-video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe,
object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

View file

@ -189,6 +189,16 @@ 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
Embed a responsive video from YouTube or Vimeo.
```liquid
{% raw %}{% include responsive_video id="97649261" provider="vimeo" %}{% endraw %}
```
{% include responsive_video id="97649261" provider="vimeo" %}
## Table of Contents ## Table of Contents
To include an [auto-generated table of contents](http://kramdown.rubyforge.org/converter/html.html#toc) for posts and pages, add the following helper before any actual content in your post or page. To include an [auto-generated table of contents](http://kramdown.rubyforge.org/converter/html.html#toc) for posts and pages, add the following helper before any actual content in your post or page.
@ -280,4 +290,4 @@ To add a navigation list to a post or page's main content instead of the sidebar
| Parameter | Required | Description | | Parameter | Required | Description |
| --------- | -------- | ----------- | | --------- | -------- | ----------- |
| items | **Required** | Name of the links array found in `_data/navigation.yml`. | | items | **Required** | Name of the links array found in `_data/navigation.yml`. |

View file

@ -0,0 +1,4 @@
{% capture video_id %}{{ page.header.video.id }}{% endcapture %}
{% capture video_provider %}{{ page.header.video.provider }}{% endcapture %}
{% include responsive_video id=video_id provider=video_provider %}

View file

@ -0,0 +1,11 @@
{% capture video_id %}{{ include.id }}{% endcapture %}
{% capture video_provider %}{{ include.provider }}{% endcapture %}
<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">
{% if video_provider == "vimeo" %}
<iframe src="http://player.vimeo.com/video/{{ video_id }}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
{% elsif video_provider == "youtube" %}
<iframe src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
{% endif %}
</div>

View file

@ -4,6 +4,8 @@ layout: default
{% if page.header.overlay_color or page.header.overlay_image or page.header.image %} {% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
{% include page__hero.html %} {% include page__hero.html %}
{% elsif page.header.video.id and page.header.video.provider %}
{% include page__hero_video.html %}
{% endif %} {% endif %}
{% if page.url != "/" and site.breadcrumbs %} {% if page.url != "/" and site.breadcrumbs %}
@ -71,4 +73,4 @@ layout: default
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>

View file

@ -0,0 +1,51 @@
---
title: "Layout: Header Video"
header:
video:
id: XsxDH4HcOWA
provider: youtube
categories:
- Layout
- Uncategorized
tags:
- video
- layout
---
This post should display a **header with a reponsive 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
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):
```yaml
header:
video:
id: XsxDH4HcOWA
provider: youtube
```
{% include responsive_video id="XsxDH4HcOWA" provider="youtube" %}
## Vimeo
Here is a Vimeo example for the video at url `https://vimeo.com/97649261`:
```yaml
header:
video:
id: 97649261
provider: vimeo
```
{% include responsive_video id="97649261" provider="vimeo" %}

View file

@ -479,4 +479,27 @@ a.reversefootnote {
table, tr, td { table, tr, td {
border: 0; /* remove table borders widget */ border: 0; /* remove table borders widget */
} }
} }
/*
Responsive Video Embed
========================================================================== */
.responsive-video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe,
object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}