Add responsive iframe support to markdown renderer

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
 

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

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