From 7a1993a6729f961ba56d30007b018cda925fae90 Mon Sep 17 00:00:00 2001
From: Michael Rose <mmistakes@users.noreply.github.com>
Date: Thu, 23 Mar 2017 15:46:54 -0400
Subject: [PATCH] Add responsive embed helper classes for fluid-width videos.
 (#5)

Close #2
---
 CHANGELOG.md                                  |  1 +
 _sass/basically-basic.scss                    |  1 +
 _sass/basically-basic/_responsive-embed.scss  | 70 +++++++++++++++++++
 docs/_sass/basically-basic.scss               |  1 +
 .../basically-basic/_responsive-embed.scss    | 70 +++++++++++++++++++
 .../_posts/2010-06-02-post-video-youtube.md   | 22 +++++-
 6 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 _sass/basically-basic/_responsive-embed.scss
 create mode 100644 docs/_sass/basically-basic/_responsive-embed.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30eebff..497447f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
+- Responsive embed helper classes for videos. [#2](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/2)
 - Print styles for improved readability of printed pages. [#4](https://github.com/mmistakes/jekyll-theme-basically-basic/pull/4)
 - Icon list to README.
 
diff --git a/_sass/basically-basic.scss b/_sass/basically-basic.scss
index 21a5f10..63538cd 100644
--- a/_sass/basically-basic.scss
+++ b/_sass/basically-basic.scss
@@ -32,6 +32,7 @@
 @import 'basically-basic/navicons';
 @import 'basically-basic/contact-lists';
 @import 'basically-basic/syntax-highlighting';
+@import 'basically-basic/responsive-embed';
 
 /* Utility classes */
 @import 'basically-basic/utilities';
diff --git a/_sass/basically-basic/_responsive-embed.scss b/_sass/basically-basic/_responsive-embed.scss
new file mode 100644
index 0000000..b679fc3
--- /dev/null
+++ b/_sass/basically-basic/_responsive-embed.scss
@@ -0,0 +1,70 @@
+/* ==========================================================================
+   Responsive Embed
+   Credit: Nicolas Gallagher and SUIT CSS.
+
+   <!-- 16:9 aspect ratio -->
+   <div class="embed-responsive embed-responsive-16by9">
+     <iframe class="embed-responsive-item" src="..."></iframe>
+   </div>
+
+   <!-- 4:3 aspect ratio -->
+   <div class="embed-responsive embed-responsive-4by3">
+     <iframe class="embed-responsive-item" src="..."></iframe>
+   </div>
+   ========================================================================== */
+
+.embed-responsive {
+  display: block;
+  position: relative;
+  width: 100%;
+  margin-bottom: 1.5rem;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: '';
+  }
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+
+.embed-responsive-21by9 {
+
+  &::before {
+    padding-top: percentage(9 / 21);
+  }
+}
+
+.embed-responsive-16by9 {
+
+  &::before {
+    padding-top: percentage(9 / 16);
+  }
+}
+
+.embed-responsive-4by3 {
+
+  &::before {
+    padding-top: percentage(3 / 4);
+  }
+}
+
+.embed-responsive-1by1 {
+
+  &::before {
+    padding-top: percentage(1 / 1);
+  }
+}
diff --git a/docs/_sass/basically-basic.scss b/docs/_sass/basically-basic.scss
index 21a5f10..63538cd 100644
--- a/docs/_sass/basically-basic.scss
+++ b/docs/_sass/basically-basic.scss
@@ -32,6 +32,7 @@
 @import 'basically-basic/navicons';
 @import 'basically-basic/contact-lists';
 @import 'basically-basic/syntax-highlighting';
+@import 'basically-basic/responsive-embed';
 
 /* Utility classes */
 @import 'basically-basic/utilities';
diff --git a/docs/_sass/basically-basic/_responsive-embed.scss b/docs/_sass/basically-basic/_responsive-embed.scss
new file mode 100644
index 0000000..b679fc3
--- /dev/null
+++ b/docs/_sass/basically-basic/_responsive-embed.scss
@@ -0,0 +1,70 @@
+/* ==========================================================================
+   Responsive Embed
+   Credit: Nicolas Gallagher and SUIT CSS.
+
+   <!-- 16:9 aspect ratio -->
+   <div class="embed-responsive embed-responsive-16by9">
+     <iframe class="embed-responsive-item" src="..."></iframe>
+   </div>
+
+   <!-- 4:3 aspect ratio -->
+   <div class="embed-responsive embed-responsive-4by3">
+     <iframe class="embed-responsive-item" src="..."></iframe>
+   </div>
+   ========================================================================== */
+
+.embed-responsive {
+  display: block;
+  position: relative;
+  width: 100%;
+  margin-bottom: 1.5rem;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: '';
+  }
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+
+.embed-responsive-21by9 {
+
+  &::before {
+    padding-top: percentage(9 / 21);
+  }
+}
+
+.embed-responsive-16by9 {
+
+  &::before {
+    padding-top: percentage(9 / 16);
+  }
+}
+
+.embed-responsive-4by3 {
+
+  &::before {
+    padding-top: percentage(3 / 4);
+  }
+}
+
+.embed-responsive-1by1 {
+
+  &::before {
+    padding-top: percentage(1 / 1);
+  }
+}
diff --git a/example/_posts/2010-06-02-post-video-youtube.md b/example/_posts/2010-06-02-post-video-youtube.md
index 117cb86..d4fd8d6 100644
--- a/example/_posts/2010-06-02-post-video-youtube.md
+++ b/example/_posts/2010-06-02-post-video-youtube.md
@@ -4,9 +4,25 @@ categories:
   - Post Formats
 tags:
   - Post Formats
-last_modified_at: 2017-03-09T12:58:20-05:00
+last_modified_at: 2017-03-23T15:33:37-04:00
 ---
 
-<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;" frameborder="0" allowfullscreen></iframe>
+<div class="embed-responsive embed-responsive-16by9">
+  <iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;" frameborder="0" allowfullscreen></iframe>
+</div>
 
-This post test YouTube video embeds.
\ No newline at end of file
+This post tests YouTube video embeds.
+
+Simply wrap embeds with a `<div>` element and the appropriate classes:
+
+```html
+<!-- 16:9 aspect ratio -->
+<div class="embed-responsive embed-responsive-16by9">
+  <iframe class="embed-responsive-item" src="..."></iframe>
+</div>
+
+<!-- 4:3 aspect ratio -->
+<div class="embed-responsive embed-responsive-4by3">
+  <iframe class="embed-responsive-item" src="..."></iframe>
+</div>
+```