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>

src/layouts/blogPost.astro

@@ -120,18 +120,6 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     color: orange;
   }
 
-  article :global(.youtube-center) {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  article :global(.youtube-center) :global(lite-youtube) {
-    width: 100%;
-    max-height: 360px;
-    max-width: 640px;
-  }
-
   @media (min-width: 1000px) {
     article {
       margin-left: 10rem;

src/pages/blog/instant-death.mdx

@@ -6,8 +6,8 @@ description: 'Blog post talking about instant death in FGO, how you can take adv
 author: 'Firq'
 tags: ['fgo', 'games']
 ---
-import { YouTube } from '@astro-community/astro-embed-youtube';
 import thumbnail from "../../assets/thumbnails/UwbNp_dB_VU.jpg"
+import YoutubeEmbed from "../../components/youtubeEmbed.astro"
 
 > **Disclaimer**<br/>
 > While writing this, Requiem and I faced a bit of a challenge concerning death rate calculations. Case in point is the passive "Item Construction"
@@ -105,9 +105,7 @@ For other skill levels, this looks like this (_Her S1 scales from 50% to 100%_)
 
 In the end, this resulted in the following comp that worked like a charm.
 
-<div class="youtube-center">
-      <YouTube id="UwbNp_dB_VU" poster={thumbnail.src}/>
-</div>
+<YoutubeEmbed id="UwbNp_dB_VU" thumbnail={thumbnail.src}/>
 
 
 ## Conclusion