From ed098aa51012c69f1bd8e681abc081a7f602eb42 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Thu, 21 May 2020 14:47:36 -0700
Subject: [PATCH] feat: added video component

---
 src/components/Video.js          | 22 ++++++++++++++++++++++
 src/components/Video.module.scss |  9 +++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/components/Video.js
 create mode 100644 src/components/Video.module.scss

diff --git a/src/components/Video.js b/src/components/Video.js
new file mode 100644
index 000000000..ebe658f06
--- /dev/null
+++ b/src/components/Video.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './Video.module.scss';
+
+const Video = ({ youtubeId }) => (
+  <div className={styles.Video}>
+    <iframe
+      src={`//www.youtube.com/embed/${youtubeId}`}
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      frameBorder="0"
+      allowFullScreen
+    />
+  </div>
+);
+
+Video.propTypes = {
+  // NOTE: we should expand this allow for other video sources in the future
+  youtubeId: PropTypes.string.isRequired,
+};
+
+export default Video;
diff --git a/src/components/Video.module.scss b/src/components/Video.module.scss
new file mode 100644
index 000000000..d370cfd84
--- /dev/null
+++ b/src/components/Video.module.scss
@@ -0,0 +1,9 @@
+.Video {
+  max-width: 560px;
+  margin: 1rem 0;
+
+  iframe {
+    width: 100%;
+    height: 315px;
+  }
+}