astro.config.mjs

@@ -1,8 +1,10 @@
 import { defineConfig } from 'astro/config';
 
-// https://astro.build/config
 import sitemap from "@astrojs/sitemap";
 
+// https://astro.build/config
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
   sitemap: true,
@@ -10,5 +12,5 @@ export default defineConfig({
   outDir: 'dist',
   publicDir: 'static',
   site: 'https://firq.dev/',
-  integrations: [sitemap()]
+  integrations: [sitemap(), mdx()]
 });

package.json

@@ -11,7 +11,9 @@
 		"astro": "astro"
 	},
 	"dependencies": {
+		"@astro-community/astro-embed-youtube": "^0.4.3",
 		"@astrojs/check": "^0.3.3",
+		"@astrojs/mdx": "^2.0.3",
 		"@astrojs/sitemap": "^3.0.3",
 		"astro": "^4.0.7",
 		"iconoir": "^7.2.0",

src/layouts/blogPost.astro

@@ -120,6 +120,18 @@ 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.astro

@@ -5,7 +5,7 @@ import BlogSection from '../layouts/blogSection.astro'
 
 const description =
   'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
-const allPosts = await Astro.glob('../pages/blog/*.md')
+const allPosts = await Astro.glob('../pages/blog/*.{md,mdx}')
 allPosts.sort(
   (a, b) =>
     Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)

src/pages/blog/instant-death.mdx

@@ -6,6 +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"
 
 > **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"
@@ -103,10 +105,11 @@ 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 style="width: 100%; display: flex; justify-content: center; padding-top: 0.75rem">
-<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/UwbNp_dB_VU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>
+<div class="youtube-center">
+      <YouTube id="UwbNp_dB_VU" poster={thumbnail.src}/>
 </div>
 
+
 ## Conclusion
 
 This small article should have given you an insight into using Instant Death as an advantage in the future. But remember: Stacking Gacha in a Gacha game can backfire.