Add responsive embed helper classes for fluid-width videos. (#5)

Close #2

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.
 

_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';

_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);
+  }
+}

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';

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);
+  }
+}

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.
+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>
+```