feat: add the example post about embed video

src/content/posts/cover.md

@@ -1,6 +1,6 @@
 ---
 title: 'Cover Image Example'
-published: 2022-09-09
+published: 2023-09-01
 description: 'How to set a cover image using the cover attribute.'
 cover:
   url: 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg'

src/content/posts/markdown.md

@@ -1,6 +1,6 @@
 ---
 title: Markdown Example
-published: 2023-10-18
+published: 2023-10-01
 description: A simple example of a Markdown blog post.
 cover:
   url:

src/content/posts/video.md

@@ -0,0 +1,27 @@
+---
+title: Include Video in the Posts
+published: 2022-08-01
+description: This post demonstrates how to include embedded video in a blog post.
+cover:
+  url: 
+  alt: 
+tags: [Example, Video]
+categories: []
+---
+Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.
+
+```yaml
+---
+title: Include Video in the Post
+published: 2023-10-19
+// ...
+---
+
+<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+```
+
+## YouTube
+<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+## Bilibili
+<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

src/pages/posts/[slug].astro

@@ -26,7 +26,7 @@ const { remarkPluginFrontmatter } = await entry.render();
 ---
 <MainGridLayout banner={entry.data.cover.url} title={entry.data.title}>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
-        <div class:list={["card-base z-10 px-4 md:px-9 py-6 relative w-full ",
+        <div class:list={["card-base z-10 px-4 md:px-9 pt-6 pb-10 relative w-full ",
             {}
         ]}>
             <!-- word count and reading time -->
@@ -171,5 +171,10 @@ const { remarkPluginFrontmatter } = await entry.render();
   hr
     border-color: var(--line-divider)
     border-style: dashed
+  iframe
+    border-radius: 8px
+    margin-left: auto
+    margin-right: auto
+    max-width: 100%
 
 </style>