Add YouTube and Vimeo video embed support

Author: kylegordy

_includes/vimeo.html

@@ -0,0 +1,9 @@
+{% comment %}
+    Include Vimeo videos inside your post like so:
+    {% include vimeo.html id="142316610" aspect="16x9" %}
+    Note, the aspect ratio is optional (defaults to 16x9).
+{% endcomment %}
+
+<div class="embed-responsive aspect-ratio-{{ include.aspect | default: "16x9" }}">
+    <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/{{ include.id }}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+</div>

_includes/youtube.html

@@ -0,0 +1,9 @@
+{% comment %}
+    Include YouTube videos inside your post like so:
+    {% include youtube.html id="oHg5SJYRHA0" aspect="4x3" %}
+    Note, the aspect ratio is optional (defaults to 16x9).
+{% endcomment %}
+
+<div class="embed-responsive aspect-ratio-{{ include.aspect | default: "16x9" }}">
+    <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{ include.id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

assets/_sass/utilities/_embeds.scss

@@ -0,0 +1,38 @@
+////////////////////
+// Responsive Embeds
+////////////////////
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+.embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+}
+
+// Aspect ratios
+.aspect-ratio-1x1 {
+  padding-top: 100%;
+}
+
+.aspect-ratio-16x9 {
+  padding-top: 56.25%;
+}
+
+.aspect-ratio-4x3 {
+  padding-top: 75%;
+}

assets/css/main.scss

@@ -22,6 +22,7 @@
 @import "utilities/spacing";
 @import "utilities/images";
 @import "utilities/position";
+@import "utilities/embeds";
 
 @import "component/button";
 @import "component/navigation";