replace youtube-lite package

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "5.4.2",
+  "version": "5.4.3",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
@@ -21,6 +21,7 @@
     "@astrojs/react": "4.2.4",
     "@astrojs/rss": "4.0.11",
     "@astrojs/sitemap": "3.3.0",
+    "@justinribeiro/lite-youtube": "^1.7.1",
     "astro": "5.7.4",
     "astro-auto-import": "^0.4.4",
     "astro-font": "^1.1.0",
@@ -33,7 +34,6 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
-    "react-lite-youtube-embed": "^2.4.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
     "swiper": "^11.2.6",

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;