From 795159f4b2836b3a9d56216555fe33415f77660e Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Wed, 18 Apr 2018 14:47:28 +1000
Subject: [PATCH] Add responsive iframe support to markdown renderer

---
 content/pages/about.md     |  4 ++++
 src/components/Content.css | 17 +++++++++++++++++
 src/components/Content.js  | 12 +++++++++++-
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/content/pages/about.md b/content/pages/about.md
index b2dfca3..4da7686 100644
--- a/content/pages/about.md
+++ b/content/pages/about.md
@@ -11,6 +11,10 @@ section1: |-
 
   [Link test](/images/uploads/isabella juskova.jpg)
 
+  ### Embed Test
+
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/Js00yn142ic" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+
 section2: >-
   ## This is a Container component
 
diff --git a/src/components/Content.css b/src/components/Content.css
index 07463a3..55fc6ab 100644
--- a/src/components/Content.css
+++ b/src/components/Content.css
@@ -6,3 +6,20 @@
   max-width: 100%;
   height: auto;
 }
+
+.Content--Iframe {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  height: auto;
+}
+
+.Content--Iframe iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/components/Content.js b/src/components/Content.js
index 97d07bd..cda3971 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -18,7 +18,8 @@ export default ({ source, className = '' }) => (
     className={`Content ${className}`}
     source={encodeMarkdownURIs(source)}
     renderers={{
-      image: ImageWithSrcset
+      image: ImageWithSrcset,
+      html: HtmlBlock
     }}
   />
 )
@@ -35,3 +36,12 @@ const ImageWithSrcset = ({ nodeKey, src, alt, ...props }) => {
     />
   )
 }
+
+const HtmlBlock = ({ value }) => (
+  <div
+    className={value.indexOf('iframe') ? `Content--Iframe` : ``}
+    dangerouslySetInnerHTML={{
+      __html: value
+    }}
+  />
+)