Add page hero video for vimeo/youtube using embedresponsively.com code (#788)
This commit is contained in:
Justin Too
Michael Rose
parent
22a4b3d0b7
commit
65a6654582
10 changed files with 146 additions and 5 deletions
4
_includes/page__hero_video.html
Normal file
4
_includes/page__hero_video.html
Normal 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 %}
|
||||
11
_includes/responsive_video
Normal file
11
_includes/responsive_video
Normal 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>
|
||||
|
|
@ -4,6 +4,8 @@ layout: default
|
|||
|
||||
{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
|
||||
{% include page__hero.html %}
|
||||
{% elsif page.header.video.id and page.header.video.provider %}
|
||||
{% include page__hero_video.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.url != "/" and site.breadcrumbs %}
|
||||
|
|
@ -71,4 +73,4 @@ layout: default
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -479,4 +479,27 @@ a.reversefootnote {
|
|||
table, tr, td {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
{: .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
|
||||
|
||||
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 |
|
||||
| --------- | -------- | ----------- |
|
||||
| items | **Required** | Name of the links array found in `_data/navigation.yml`. |
|
||||
| items | **Required** | Name of the links array found in `_data/navigation.yml`. |
|
||||
|
|
|
|||
4
docs/_includes/page__hero_video.html
Normal file
4
docs/_includes/page__hero_video.html
Normal 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 %}
|
||||
11
docs/_includes/responsive_video
Normal file
11
docs/_includes/responsive_video
Normal 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>
|
||||
|
|
@ -4,6 +4,8 @@ layout: default
|
|||
|
||||
{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
|
||||
{% include page__hero.html %}
|
||||
{% elsif page.header.video.id and page.header.video.provider %}
|
||||
{% include page__hero_video.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.url != "/" and site.breadcrumbs %}
|
||||
|
|
@ -71,4 +73,4 @@ layout: default
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
51
docs/_posts/2017-01-23-layout-header-video.md
Normal file
51
docs/_posts/2017-01-23-layout-header-video.md
Normal 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" %}
|
||||
|
||||
|
|
@ -479,4 +479,27 @@ a.reversefootnote {
|
|||
table, tr, td {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue