From 82ae0f49e3580afa80b3b597c73e760b92367347 Mon Sep 17 00:00:00 2001 From: Justin Too Date: Mon, 23 Jan 2017 12:40:12 -0800 Subject: [PATCH] Add page hero video for vimeo/youtube using embedresponsively.com code --- _includes/page__hero_video.html | 4 ++ _includes/responsive_video | 11 ++++ _layouts/single.html | 4 +- _sass/_utilities.scss | 25 ++++++++- docs/_docs/14-helpers.md | 12 ++++- docs/_includes/page__hero_video.html | 4 ++ docs/_includes/responsive_video | 11 ++++ docs/_layouts/single.html | 4 +- docs/_posts/2017-01-23-layout-header-video.md | 51 +++++++++++++++++++ docs/_sass/_utilities.scss | 25 ++++++++- 10 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 _includes/page__hero_video.html create mode 100644 _includes/responsive_video create mode 100644 docs/_includes/page__hero_video.html create mode 100644 docs/_includes/responsive_video create mode 100644 docs/_posts/2017-01-23-layout-header-video.md diff --git a/_includes/page__hero_video.html b/_includes/page__hero_video.html new file mode 100644 index 000000000000..ebb11a5b54dc --- /dev/null +++ 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 new file mode 100644 index 000000000000..f7361079f7dc --- /dev/null +++ b/_includes/responsive_video @@ -0,0 +1,11 @@ +{% capture video_id %}{{ include.id }}{% endcapture %} +{% capture video_provider %}{{ include.provider }}{% endcapture %} + + +
+{% if video_provider == "vimeo" %} + +{% elsif video_provider == "youtube" %} + +{% endif %} +
diff --git a/_layouts/single.html b/_layouts/single.html index 9035528590b6..599135026fb9 100644 --- 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 @@

{{ site.data.ui-text[site.locale].related_label {% endif %} - \ No newline at end of file + diff --git a/_sass/_utilities.scss b/_sass/_utilities.scss index 9a05c80706f4..ab21b6387ea0 100644 --- a/_sass/_utilities.scss +++ b/_sass/_utilities.scss @@ -479,4 +479,27 @@ a.reversefootnote { table, tr, td { border: 0; /* remove table borders widget */ } -} \ No newline at end of file +} + +/* + 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 index 325b8b9bca9e..2aaa85ac25c7 100644 --- 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`. | \ No newline at end of file +| 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 new file mode 100644 index 000000000000..ebb11a5b54dc --- /dev/null +++ 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 new file mode 100644 index 000000000000..f7361079f7dc --- /dev/null +++ b/docs/_includes/responsive_video @@ -0,0 +1,11 @@ +{% capture video_id %}{{ include.id }}{% endcapture %} +{% capture video_provider %}{{ include.provider }}{% endcapture %} + + +
+{% if video_provider == "vimeo" %} + +{% elsif video_provider == "youtube" %} + +{% endif %} +
diff --git a/docs/_layouts/single.html b/docs/_layouts/single.html index 9035528590b6..599135026fb9 100644 --- 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 @@

{{ site.data.ui-text[site.locale].related_label {% endif %} - \ No newline at end of file + diff --git a/docs/_posts/2017-01-23-layout-header-video.md b/docs/_posts/2017-01-23-layout-header-video.md new file mode 100644 index 000000000000..5df1a9bd210c --- /dev/null +++ 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 index 9a05c80706f4..ab21b6387ea0 100644 --- 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 */ } -} \ No newline at end of file +} + +/* + 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%; + } +} +