Merge pull request #70 from newrelic/video-wistia

Add wistia support for embedded video
newrelic · May 29, 2020 · 73fb151 · 73fb151
2 parents 4bd2fe3 + 7549dfb
commit 73fb151
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/src/components/Video.js b/src/components/Video.js
@@ -3,21 +3,27 @@ import PropTypes from 'prop-types';
 
 import styles from './Video.module.scss';
 
-const Video = ({ youtubeId, title }) => (
-  <div className={styles.Video}>
-    <iframe
-      src={`//www.youtube.com/embed/${youtubeId}?modestbranding=1`}
-      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-      title={title}
-      frameBorder="0"
-      allowFullScreen
-    />
-  </div>
-);
+const Video = ({ id, type, title }) => {
+  const src = {
+    youtube: `//www.youtube.com/embed/${id}?modestbranding=1`,
+    wistia: `//fast.wistia.net/embed/iframe/${id}`,
+  };
+  return (
+    <div className={styles.Video}>
+      <iframe
+        src={src[type]}
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        title={title}
+        frameBorder="0"
+        allowFullScreen
+      />
+    </div>
+  );
+};
 
 Video.propTypes = {
-  // NOTE: we should expand this allow for other video sources in the future
-  youtubeId: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
   title: PropTypes.string,
 };
 

diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx
@@ -23,4 +23,6 @@ export default FooBar;
 
 Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis.
 
-<Video youtubeId="ZagZfNQYJEU" />
+<Video id="ZagZfNQYJEU" type="youtube" />
+
+<Video id="zxunt1u1as" type="wistia"/>