From 1ccf80f9a2df5abf53bd7dd738f46ce8585c021f Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Thu, 19 Oct 2023 23:12:55 +0800
Subject: [PATCH] feat: add the example post about embed video

---
 src/content/posts/cover.md    |  2 +-
 src/content/posts/markdown.md |  2 +-
 src/content/posts/video.md    | 27 +++++++++++++++++++++++++++
 src/pages/posts/[slug].astro  |  7 ++++++-
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/content/posts/video.md

diff --git a/src/content/posts/cover.md b/src/content/posts/cover.md
index f4ed7ef..ca48734 100644
--- a/src/content/posts/cover.md
+++ b/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'
diff --git a/src/content/posts/markdown.md b/src/content/posts/markdown.md
index 44c23c4..8bfc305 100644
--- a/src/content/posts/markdown.md
+++ b/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:
diff --git a/src/content/posts/video.md b/src/content/posts/video.md
new file mode 100644
index 0000000..5a12905
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index 290b5d1..85f61cd 100644
--- a/src/pages/posts/[slug].astro
+++ b/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>
\ No newline at end of file