Developed own component to wrap youtube-lite (adds placeholder when JS is off)

src/components/youtubeEmbed.astro

@@ -0,0 +1,59 @@
+---
+import { YouTube } from '@astro-community/astro-embed-youtube'
+import type { ImageMetadata } from 'astro'
+
+export interface Props {
+  id: string
+  thumbnail: string
+}
+
+const { id, thumbnail } = Astro.props
+---
+
+<div class="youtube-center">
+  <noscript
+    style="display: flex; justify-content: center;"
+  >
+    <style>
+      lite-youtube {
+        display: none;
+      }
+    </style>
+    <div class="warningtext">
+      <span>
+        To view the video, enable JavaScript or <a
+          href=`https://www.youtube.com/watch?v=${id}`
+          target="_blank"
+          rel="noopener noreferrer">watch it on YouTube</a
+        >
+      </span>
+    </div>
+  </noscript>
+  <YouTube id={id} poster={thumbnail}/>
+</div>
+
+<style>
+  .youtube-center {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  lite-youtube {
+    width: 100%;
+    max-height: 360px;
+    max-width: 640px;
+  }
+
+  .warningtext {
+    display: flex;
+    justify-content: center;
+    background-color: var(--c-darkgray);
+    width: 640px;
+    height: 360px;
+  }
+
+  span {
+    margin-top: 10%
+  }
+</style>