diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
index 9f551a4..7fb0389 100644
--- a/.vitepress/theme/index.js
+++ b/.vitepress/theme/index.js
@@ -3,6 +3,7 @@ import { h, watch } from 'vue'
 // import Theme from 'vitepress/theme'
 import DefaultTheme from 'vitepress/theme-without-fonts'
 import Download from '../../components/Download.vue'
+import Bilibili from '../../components/Bilibili.vue'
 import './style.css'
 import './rainbow.css'
 
@@ -18,6 +19,7 @@ export default {
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('Download', Download)
+    ctx.app.component('Bilibili', Bilibili)
     if (typeof window === 'undefined')
       return
 
diff --git a/components/Bilibili.vue b/components/Bilibili.vue
new file mode 100644
index 0000000..e9fa068
--- /dev/null
+++ b/components/Bilibili.vue
@@ -0,0 +1,25 @@
+<template>
+  <iframe :src="`//player.bilibili.com/player.html?bvid=${bvid}&autoplay=false`" scrolling="no" border="0" frameborder="no"
+    framespacing="0" allowfullscreen="true" class="bili_iframe"/>
+</template>
+
+<script setup>
+  import { defineProps } from 'vue'
+  const { bvid } = defineProps({
+    bvid: {
+      type: String,
+      default: 'BV1GJ411x7h7',
+      required: true,
+      validator: (value) => {
+        return value.trim() !== ''
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .bili_iframe {
+    width: 100%;
+    height: 23rem;
+  }
+</style>
\ No newline at end of file