From bcbfffe038bd20afd5b2e8d1c8bcbdcdc41bda3e Mon Sep 17 00:00:00 2001
From: Somrat <58769763+tfsomrat@users.noreply.github.com>
Date: Wed, 23 Apr 2025 15:57:57 +0600
Subject: [PATCH] replace youtube-lite package

---
 package.json                       |  4 ++--
 src/content/pages/elements.mdx     |  7 ++-----
 src/layouts/shortcodes/Youtube.tsx | 18 +++++++-----------
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index ab834b9..493c158 100755
--- a/package.json
+++ b/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",
diff --git a/src/content/pages/elements.mdx b/src/content/pages/elements.mdx
index 489c5ed..60cd9b8 100755
--- a/src/content/pages/elements.mdx
+++ b/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" />
diff --git a/src/layouts/shortcodes/Youtube.tsx b/src/layouts/shortcodes/Youtube.tsx
index 74eb4d1..13fb624 100644
--- a/src/layouts/shortcodes/Youtube.tsx
+++ b/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;