From 6834509275e8c5d41c04bba29a1dc12a45270a8f Mon Sep 17 00:00:00 2001
From: Kyle Gordy <kyletgordy@gmail.com>
Date: Mon, 2 Dec 2019 15:49:01 -0500
Subject: [PATCH] Add YouTube and Vimeo video embed support

---
 _includes/vimeo.html                |  9 +++++++
 _includes/youtube.html              |  9 +++++++
 assets/_sass/utilities/_embeds.scss | 38 +++++++++++++++++++++++++++++
 assets/css/main.scss                |  1 +
 4 files changed, 57 insertions(+)
 create mode 100644 _includes/vimeo.html
 create mode 100644 _includes/youtube.html
 create mode 100644 assets/_sass/utilities/_embeds.scss

diff --git a/_includes/vimeo.html b/_includes/vimeo.html
new file mode 100644
index 0000000..077e6b5
--- /dev/null
+++ b/_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>
diff --git a/_includes/youtube.html b/_includes/youtube.html
new file mode 100644
index 0000000..d1a5f55
--- /dev/null
+++ b/_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>
diff --git a/assets/_sass/utilities/_embeds.scss b/assets/_sass/utilities/_embeds.scss
new file mode 100644
index 0000000..b9e2c54
--- /dev/null
+++ b/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%;
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 39f9c2b..4ac77f7 100644
--- a/assets/css/main.scss
+++ b/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";