Merge pull request #98 from life-itself/youtube-embed

site/components/Link.js

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import ReactPlayer from "react-player";
+
+const videoLinks = [
+  "youtube.com",
+  "dailymotion.com",
+  "vimeo.com",
+  "soundcloud.com",
+  "facebook.com/watch",
+  "twitch.com",
+];
+
+export const Paragraph = (props) => {
+  if (
+    typeof props.children == "object" &&
+    props.children.props &&
+    props.children.props.href &&
+    videoLinks.some((str) => props.children.props.href.includes(str))
+  )
+    return (
+      <div className="relative pt-[56.25%]" {...props}>
+        <ReactPlayer
+          className="absolute top-0 left-0"
+          width="100%"
+          height="100%"
+          url={props.children.props.href}
+        />
+      </div>
+    );
+  return <p {...props} />;
+};

site/components/MDX.js

@@ -1,8 +1,9 @@
 import Head from 'next/head'
-import Link from 'next/link'
+import { Paragraph } from './Link'
 
 const components = {
   Head,
+  p: Paragraph
 }
 
 export default function MdxPage({ children }) {

site/content/test.md

@@ -0,0 +1,11 @@
+# Test page for video embed links in markdown
+
+This youtube link (https://www.youtube.com/embed/K5JtPTyc0y0) surrounded by newlines in markdown would display as follows:
+
+https://www.youtube.com/embed/K5JtPTyc0y0
+
+Links without being surrounded by newlines will show as below:
+
+* Youtube:  https://www.youtube.com/watch?v=z2uAg-AIs-Y
+* Podcast: https://anchor.fm/life-itself/episodes/Are-Cryptocurrencies-Securities--The-Nature-of-Securities--Their-Relation-to-Crypto-Tokens-with-Stephen-Diehl-e1fph69
+* Wiki topic:  [Securities Framework](../concepts/security.md)

site/package.json

@@ -22,6 +22,7 @@
     "next-themes": "^0.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-player": "^2.10.0",
     "remark-gfm": "^3.0.0",
     "remark-slug": "^7.0.0",
     "remark-toc": "^8.0.0"