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

mmistakes#788)
jchwenger · Jan 24, 2017 · 61ec113 · 61ec113
1 parent 176354f
commit 61ec113
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 5 deletions.
diff --git a/_includes/page__hero_video.html b/_includes/page__hero_video.html
@@ -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 %}
diff --git a/_includes/responsive_video b/_includes/responsive_video
@@ -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>
diff --git a/_layouts/single.html b/_layouts/single.html
@@ -4,6 +4,8 @@
 
 {% 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 @@ <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label
       </div>
     </div>
   {% endif %}
-</div>
+</div>
diff --git a/_sass/_utilities.scss b/_sass/_utilities.scss
@@ -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%;
+  }
+}
+
diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md
@@ -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`. |
diff --git a/docs/_includes/page__hero_video.html b/docs/_includes/page__hero_video.html
@@ -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 %}
diff --git a/docs/_includes/responsive_video b/docs/_includes/responsive_video
@@ -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>
diff --git a/docs/_layouts/single.html b/docs/_layouts/single.html
@@ -4,6 +4,8 @@
 
 {% 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 @@ <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label
       </div>
     </div>
   {% endif %}
-</div>
+</div>
diff --git a/docs/_posts/2017-01-23-layout-header-video.md b/docs/_posts/2017-01-23-layout-header-video.md
@@ -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" %}
+
diff --git a/docs/_sass/_utilities.scss b/docs/_sass/_utilities.scss
@@ -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%;
+  }
+}
+