replace youtube-lite package

src/content/pages/elements.mdx

@@ -243,13 +243,10 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 ### Youtube video
 
-<Youtube client:load id="ZEe-IFezQok" title="Youtube Video Test Title" />
+<Youtube id="C0DPdy98e4c" title="Play:Youtube"/>
 
 ---
 
 ### Custom video
 
-<Video
-  width="100%"
-  src="https://joy1.videvo.net/videvo_files/video/free/video0467/large_watermarked/_import_61516692993d77.04238324_preview.mp4"
-/>
+<Video width="100%" src="https://www.w3schools.com/html/mov_bbb.mp4" />

src/layouts/shortcodes/Youtube.tsx

@@ -1,6 +1,4 @@
-import React from "react";
-import LiteYouTubeEmbed from "react-lite-youtube-embed";
-import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
+import React, { useEffect } from "react";
 
 const Youtube = ({
   id,
@@ -11,14 +9,12 @@ const Youtube = ({
   title: string;
   [key: string]: any;
 }) => {
-  return (
-    <LiteYouTubeEmbed
-      wrapperClass="yt-lite rounded-lg"
-      id={id}
-      title={title}
-      {...rest}
-    />
-  );
+  useEffect(() => {
+    import("@justinribeiro/lite-youtube");
+  }, []);
+
+  // @ts-ignore
+  return <lite-youtube videoid={id} videotitle={title} {...rest} />;
 };
 
 export default Youtube;