[site/components]: replace youtube embed with lite-youtube component

site/components/Paragraph.js

@@ -1,30 +1,15 @@
-import ReactPlayer from "react-player";
+import LiteYouTubeEmbed from "react-lite-youtube-embed";
-
+import { YOUTUBE_REGEX } from "../lib/constants";
-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))
+    YOUTUBE_REGEX.test(props.children.props.href)
-  )
+  ) {
-    return (
+    const youtubeId = props.children.props.href.split(/^|=|\//).pop();
-      <div className="relative pt-[56.25%]" {...props}>
+    return <LiteYouTubeEmbed id={youtubeId} />;
-        <ReactPlayer
+  }
-          className="absolute top-0 left-0"
-          width="100%"
-          height="100%"
-          url={props.children.props.href}
-        />
-      </div>
-    );
   return <p {...props} />;
 };

site/pages/_app.js

@@ -5,6 +5,7 @@ import { DefaultSeo } from 'next-seo'
 import { ThemeProvider } from 'next-themes'
 
 import '../styles/global.css'
+import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
 import siteConfig from '../config/siteConfig.js'
 import Layout from '../components/Layout'
 import * as gtag from '../lib/gtag'