Skip to content

Commit 61ec113

Browse files
justintoommistakes
justintoo
authored and
mmistakes
committed
Add page hero video for vimeo/youtube using embedresponsively.com code (mmistakes#788)
1 parent 176354f commit 61ec113

10 files changed

+146
-5
lines changed

‎_includes/page__hero_video.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{% capture video_id %}{{ page.header.video.id }}{% endcapture %}
2+
{% capture video_provider %}{{ page.header.video.provider }}{% endcapture %}
3+
4+
{% include responsive_video id=video_id provider=video_provider %}

‎_includes/responsive_video

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{% capture video_id %}{{ include.id }}{% endcapture %}
2+
{% capture video_provider %}{{ include.provider }}{% endcapture %}
3+
4+
<!-- Courtesy of embedresponsively.com //-->
5+
<div class="responsive-video-container">
6+
{% if video_provider == "vimeo" %}
7+
<iframe src="http://player.vimeo.com/video/{{ video_id }}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
8+
{% elsif video_provider == "youtube" %}
9+
<iframe src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
10+
{% endif %}
11+
</div>

‎_layouts/single.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
66
{% include page__hero.html %}
7+
{% elsif page.header.video.id and page.header.video.provider %}
8+
{% include page__hero_video.html %}
79
{% endif %}
810

911
{% if page.url != "/" and site.breadcrumbs %}
@@ -71,4 +73,4 @@ <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label
7173
</div>
7274
</div>
7375
{% endif %}
74-
</div>
76+
</div>

‎_sass/_utilities.scss

+24-1
Original file line numberDiff line numberDiff line change
@@ -479,4 +479,27 @@ a.reversefootnote {
479479
table, tr, td {
480480
border: 0; /* remove table borders widget */
481481
}
482-
}
482+
}
483+
484+
/*
485+
Responsive Video Embed
486+
========================================================================== */
487+
488+
.responsive-video-container {
489+
position: relative;
490+
padding-bottom: 56.25%;
491+
height: 0;
492+
overflow: hidden;
493+
max-width: 100%;
494+
495+
iframe,
496+
object,
497+
embed {
498+
position: absolute;
499+
top: 0;
500+
left: 0;
501+
width: 100%;
502+
height: 100%;
503+
}
504+
}
505+

‎docs/_docs/14-helpers.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,16 @@ And then drop-in the feature row include in the body where you'd like it to appe
189189
**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.
190190
{: .notice--info}
191191

192+
## Video
193+
194+
Embed a responsive video from YouTube or Vimeo.
195+
196+
```liquid
197+
{% raw %}{% include responsive_video id="97649261" provider="vimeo" %}{% endraw %}
198+
```
199+
200+
{% include responsive_video id="97649261" provider="vimeo" %}
201+
192202
## Table of Contents
193203

194204
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
280290

281291
| Parameter | Required | Description |
282292
| --------- | -------- | ----------- |
283-
| items | **Required** | Name of the links array found in `_data/navigation.yml`. |
293+
| items | **Required** | Name of the links array found in `_data/navigation.yml`. |

‎docs/_includes/page__hero_video.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{% capture video_id %}{{ page.header.video.id }}{% endcapture %}
2+
{% capture video_provider %}{{ page.header.video.provider }}{% endcapture %}
3+
4+
{% include responsive_video id=video_id provider=video_provider %}

‎docs/_includes/responsive_video

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{% capture video_id %}{{ include.id }}{% endcapture %}
2+
{% capture video_provider %}{{ include.provider }}{% endcapture %}
3+
4+
<!-- Courtesy of embedresponsively.com //-->
5+
<div class="responsive-video-container">
6+
{% if video_provider == "vimeo" %}
7+
<iframe src="http://player.vimeo.com/video/{{ video_id }}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
8+
{% elsif video_provider == "youtube" %}
9+
<iframe src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
10+
{% endif %}
11+
</div>

‎docs/_layouts/single.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
66
{% include page__hero.html %}
7+
{% elsif page.header.video.id and page.header.video.provider %}
8+
{% include page__hero_video.html %}
79
{% endif %}
810

911
{% if page.url != "/" and site.breadcrumbs %}
@@ -71,4 +73,4 @@ <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label
7173
</div>
7274
</div>
7375
{% endif %}
74-
</div>
76+
</div>

‎docs/_posts/2017-01-23-layout-header-video.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: "Layout: Header Video"
3+
header:
4+
video:
5+
id: XsxDH4HcOWA
6+
provider: youtube
7+
categories:
8+
- Layout
9+
- Uncategorized
10+
tags:
11+
- video
12+
- layout
13+
---
14+
15+
This post should display a **header with a reponsive video**, if the theme supports it.
16+
17+
## Settings
18+
19+
|---
20+
| Parameter | Required | Description |
21+
|-|-
22+
| `id` | **Required** | ID of the video
23+
| `provider` | **Required** | Hosting provider of the video, either 'youtube' or 'vimeo'
24+
|---
25+
26+
## YouTube
27+
28+
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):
29+
30+
```yaml
31+
header:
32+
video:
33+
id: XsxDH4HcOWA
34+
provider: youtube
35+
```
36+
37+
{% include responsive_video id="XsxDH4HcOWA" provider="youtube" %}
38+
39+
## Vimeo
40+
41+
Here is a Vimeo example for the video at url `https://vimeo.com/97649261`:
42+
43+
```yaml
44+
header:
45+
video:
46+
id: 97649261
47+
provider: vimeo
48+
```
49+
50+
{% include responsive_video id="97649261" provider="vimeo" %}
51+

‎docs/_sass/_utilities.scss

+24-1
Original file line numberDiff line numberDiff line change
@@ -479,4 +479,27 @@ a.reversefootnote {
479479
table, tr, td {
480480
border: 0; /* remove table borders widget */
481481
}
482-
}
482+
}
483+
484+
/*
485+
Responsive Video Embed
486+
========================================================================== */
487+
488+
.responsive-video-container {
489+
position: relative;
490+
padding-bottom: 56.25%;
491+
height: 0;
492+
overflow: hidden;
493+
max-width: 100%;
494+
495+
iframe,
496+
object,
497+
embed {
498+
position: absolute;
499+
top: 0;
500+
left: 0;
501+
width: 100%;
502+
height: 100%;
503+
}
504+
}
505+

0 commit comments

Comments
 (0)