From 72beb533c54da072716bb678c4b1d7c2aa979375 Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Fri, 25 Mar 2022 14:35:50 +0300
Subject: [PATCH 1/3] add react-player package

---
 site/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/package.json b/site/package.json
index 3337a67..2a6921a 100644
--- a/site/package.json
+++ b/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"

From 2e3ee95c34f09e0923583943a6a6d920d37078a3 Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Fri, 25 Mar 2022 14:37:11 +0300
Subject: [PATCH 2/3] create component for youtube video embed link

---
 site/components/Link.js | 31 +++++++++++++++++++++++++++++++
 site/components/MDX.js  |  3 ++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 site/components/Link.js

diff --git a/site/components/Link.js b/site/components/Link.js
new file mode 100644
index 0000000..b1d97df
--- /dev/null
+++ b/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} />;
+};
diff --git a/site/components/MDX.js b/site/components/MDX.js
index 405122c..154f87f 100644
--- a/site/components/MDX.js
+++ b/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 }) {

From 41f15a9964772ff9c0b7a5147a24b142b3d168eb Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Fri, 25 Mar 2022 14:37:47 +0300
Subject: [PATCH 3/3] create test page for youtube video embed

---
 site/content/test.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 site/content/test.md

diff --git a/site/content/test.md b/site/content/test.md
new file mode 100644
index 0000000..1c6ed40
--- /dev/null
+++ b/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)
\ No newline at end of file