diff --git a/package-lock.json b/package-lock.json
index 3098527..0c3fe10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,14 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.24",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@onwidget/astrowind",
-      "version": "1.0.0-beta.23",
+      "version": "1.0.0-beta.24",
       "dependencies": {
+        "@astro-community/astro-embed-youtube": "^0.5.2",
         "@astrojs/rss": "^4.0.5",
         "@astrojs/sitemap": "^3.1.2",
         "@astrolib/analytics": "^0.5.0",
@@ -190,6 +191,17 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@astro-community/astro-embed-youtube": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@astro-community/astro-embed-youtube/-/astro-embed-youtube-0.5.2.tgz",
+      "integrity": "sha512-cckWcq7mFCmI6uPpIlRolSafSQRYZBOaxIc8DaCUh8+JQAtPF7O4EdpRpZBUcvbARrWEEyHJCWrt0XOGppMniw==",
+      "dependencies": {
+        "lite-youtube-embed": "^0.3.2"
+      },
+      "peerDependencies": {
+        "astro": "^2.0.0 || ^3.0.0-beta || ^4.0.0-beta"
+      }
+    },
     "node_modules/@astrojs/compiler": {
       "version": "2.7.1",
       "license": "MIT"
@@ -679,6 +691,16 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.1.1.tgz",
+      "integrity": "sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -7053,6 +7075,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lite-youtube-embed": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/lite-youtube-embed/-/lite-youtube-embed-0.3.2.tgz",
+      "integrity": "sha512-b1dgKyF4PHhinonmr3PB172Nj0qQgA/7DE9EmeIXHR1ksnFEC2olWjNJyJGdsN2cleKHRjjsmrziKlwXtPlmLQ=="
+    },
     "node_modules/load-yaml-file": {
       "version": "0.2.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index e8223f1..8c1a70d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.24",
   "description": "AstroWind: A free template using Astro 4.0 and Tailwind CSS. Astro starter theme.",
   "type": "module",
   "private": true,
@@ -17,6 +17,7 @@
     "lint:eslint": "eslint ."
   },
   "dependencies": {
+    "@astro-community/astro-embed-youtube": "^0.5.2",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.1.2",
     "@astrolib/analytics": "^0.5.0",
@@ -58,4 +59,4 @@
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.6.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/common/YoutubeVideo.astro b/src/components/common/YoutubeVideo.astro
deleted file mode 100644
index dfa882d..0000000
--- a/src/components/common/YoutubeVideo.astro
+++ /dev/null
@@ -1,277 +0,0 @@
----
-
-const {
-  videoId,
-  title = ""
-} = Astro.props;
-
----
-
-<lite-youtube videoid={videoId} playlabel={title}></lite-youtube>
-
-<style is:global>
-  lite-youtube {
-    background-color: #000;
-    position: relative;
-    display: block;
-    contain: content;
-    background-position: center center;
-    background-size: cover;
-    cursor: pointer;
-    /* max-width: 720px; */
-  }
-
-  /* gradient */
-  lite-youtube::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
-    background-position: top;
-    background-repeat: repeat-x;
-    height: 60px;
-    padding-bottom: 50px;
-    width: 100%;
-    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
-  }
-
-  /* responsive iframe with a 16:9 aspect ratio
-    thanks https://css-tricks.com/responsive-iframes/
-*/
-  lite-youtube::after {
-    content: '';
-    display: block;
-    padding-bottom: calc(100% / (16 / 9));
-  }
-  lite-youtube > iframe {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border: 0;
-  }
-
-  /* play button */
-  lite-youtube > .lty-playbtn {
-    display: block;
-    width: 68px;
-    height: 48px;
-    position: absolute;
-    cursor: pointer;
-    transform: translate3d(-50%, -50%, 0);
-    top: 50%;
-    left: 50%;
-    z-index: 1;
-    background-color: transparent;
-    /* YT's actual play button svg */
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
-    filter: grayscale(100%);
-    transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
-    border: none;
-  }
-
-  lite-youtube:hover > .lty-playbtn,
-  lite-youtube .lty-playbtn:focus {
-    filter: none;
-  }
-
-  /* Post-click styles */
-  lite-youtube.lyt-activated {
-    cursor: unset;
-  }
-  lite-youtube.lyt-activated::before,
-  lite-youtube.lyt-activated > .lty-playbtn {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .lyt-visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-</style>
-
-<script>
-  /* eslint-disable */
-// @ts-nocheck 
-  
-  /**
-   * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
-   *
-   * Thx to these as the inspiration
-   *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
-   *   https://autoplay-youtube-player.glitch.me/
-   *
-   * Once built it, I also found these:
-   *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
-   *   https://github.com/Daugilas/lazyYT
-   *   https://github.com/vb/lazyframe
-   */
-  class LiteYTEmbed extends HTMLElement {
-    connectedCallback() {
-      this.videoId = this.getAttribute('videoid');
-
-      let playBtnEl = this.querySelector('.lty-playbtn');
-      // A label for the button takes priority over a [playlabel] attribute on the custom-element
-      this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
-
-      /**
-       * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
-       *
-       * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
-       *
-       * TODO: Do the sddefault->hqdefault fallback
-       *       - When doing this, apply referrerpolicy (https://github.com/ampproject/amphtml/pull/3940)
-       * TODO: Consider using webp if supported, falling back to jpg
-       */
-      if (!this.style.backgroundImage) {
-        this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`;
-      }
-
-      // Set up play button, and its visually hidden label
-      if (!playBtnEl) {
-        playBtnEl = document.createElement('button');
-        playBtnEl.type = 'button';
-        playBtnEl.classList.add('lty-playbtn');
-        this.append(playBtnEl);
-      }
-      if (!playBtnEl.textContent) {
-        const playBtnLabelEl = document.createElement('span');
-        playBtnLabelEl.className = 'lyt-visually-hidden';
-        playBtnLabelEl.textContent = this.playLabel;
-        playBtnEl.append(playBtnLabelEl);
-      }
-      playBtnEl.removeAttribute('href');
-
-      // On hover (or tap), warm up the TCP connections we're (likely) about to use.
-      this.addEventListener('pointerover', LiteYTEmbed.warmConnections, { once: true });
-
-      // Once the user clicks, add the real iframe and drop our play button
-      // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
-      //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
-      this.addEventListener('click', this.addIframe);
-
-      // Detect Safari
-      const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome');
-
-      // Detect mobile browser
-      const isMobile = navigator.userAgent.includes('Mobi') || navigator.userAgent.includes('Android');
-
-      // Chrome & Edge desktop have no problem with the basic YouTube Embed with ?autoplay=1
-      // However Safari desktop and most/all mobile browsers do not successfully track the user gesture of clicking through the creation/loading of the iframe,
-      // so they don't autoplay automatically. Instead we must load an additional 2 sequential JS files (1KB + 165KB) (un-br) for the YT Player API
-      // TODO: Try loading the the YT API in parallel with our iframe and then attaching/playing it. #82
-      this.needsYTApiForAutoplay = isSafari || isMobile;
-    }
-
-    /**
-     * Add a <link rel={preload | preconnect} ...> to the head
-     */
-    static addPrefetch(kind: string, url: string, as: string | undefined) {
-      const linkEl = document.createElement('link');
-      linkEl.rel = kind;
-      linkEl.href = url;
-      if (as) {
-        linkEl.as = as;
-      }
-      document.head.append(linkEl);
-    }
-
-    /**
-     * Begin pre-connecting to warm up the iframe load
-     * Since the embed's network requests load within its iframe,
-     *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
-     * So, the best we can do is warm up a few connections to origins that are in the critical path.
-     *
-     * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
-     * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
-     */
-    static warmConnections() {
-      if (LiteYTEmbed.preconnected) return;
-
-      // The iframe document and most of its subresources come right off youtube.com
-      LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
-      // The botguard script is fetched off from google.com
-      LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
-
-      // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
-      LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
-      LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
-
-      LiteYTEmbed.preconnected = true;
-    }
-
-    fetchYTPlayerApi() {
-      if (window.YT || (window.YT && window.YT.Player)) return;
-
-      this.ytApiPromise = new Promise((res, rej) => {
-        var el = document.createElement('script');
-        el.src = 'https://www.youtube.com/iframe_api';
-        el.async = true;
-        el.onload = (_) => {
-          YT.ready(res);
-        };
-        el.onerror = rej;
-        this.append(el);
-      });
-    }
-
-    async addYTPlayerIframe(params: any[] | URLSearchParams) {
-      this.fetchYTPlayerApi();
-      await this.ytApiPromise;
-
-      const videoPlaceholderEl = document.createElement('div');
-      this.append(videoPlaceholderEl);
-
-      const paramsObj = Object.fromEntries(params.entries());
-
-      new YT.Player(videoPlaceholderEl, {
-        width: '100%',
-        videoId: this.videoId,
-        playerVars: paramsObj,
-        events: {
-          onReady: (event: { target: { playVideo: () => void; }; }) => {
-            event.target.playVideo();
-          },
-        },
-      });
-    }
-
-    async addIframe() {
-      if (this.classList.contains('lyt-activated')) return;
-      this.classList.add('lyt-activated');
-
-      const params = new URLSearchParams(this.getAttribute('params') || []);
-      params.append('autoplay', '1');
-      params.append('playsinline', '1');
-
-      if (this.needsYTApiForAutoplay) {
-        return this.addYTPlayerIframe(params);
-      }
-
-      const iframeEl = document.createElement('iframe');
-      iframeEl.width = 560;
-      iframeEl.height = 315;
-      // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
-      iframeEl.title = this.playLabel;
-      iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
-      iframeEl.allowFullscreen = true;
-      // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
-      // https://stackoverflow.com/q/64959723/89484
-      iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${params.toString()}`;
-      this.append(iframeEl);
-
-      // Set focus for a11y
-      iframeEl.focus();
-    }
-  }
-  // Register custom element
-  customElements.define('lite-youtube', LiteYTEmbed);
-</script>
diff --git a/src/pages/homes/startup.astro b/src/pages/homes/startup.astro
index 4df1e68..0aea545 100644
--- a/src/pages/homes/startup.astro
+++ b/src/pages/homes/startup.astro
@@ -11,7 +11,7 @@ import Features3 from '~/components/widgets/Features3.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
 import Brands from '~/components/widgets/Brands.astro';
 
-import YoutubeVideo from '~/components/common/YoutubeVideo.astro';
+import { YouTube } from '@astro-community/astro-embed-youtube';
 
 const metadata = {
   title: 'Startup Landing Page',
@@ -46,7 +46,8 @@ const metadata = {
     </Fragment>
 
     <Fragment slot="image">
-      <YoutubeVideo videoId="gxBkghlglTg" title="Astro just Launched.... Could it be the ultimate web framework?" />
+      <YouTube id="gxBkghlglTg" title="Astro just Launched.... Could it be the ultimate web framework?" />
+      <style is:inline>lite-youtube { margin: 0 auto; max-width: 100%; }</style>
     </Fragment>
   </Hero>