diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 853225ad..306f10f6 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -14,6 +14,25 @@ body.zen-mode-enable {
   }
 }
 
+.bilibili {
+  position: relative;
+}
+
+.bilibili::after {
+  content: "";
+  display: block;
+  padding-bottom: calc(100% / (16 / 9));
+}
+.bilibili > iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+}
+
+
 /*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
 
 /*
diff --git a/assets/css/components/bilibili.css b/assets/css/components/bilibili.css
new file mode 100644
index 00000000..5ad03420
--- /dev/null
+++ b/assets/css/components/bilibili.css
@@ -0,0 +1,18 @@
+.bilibili {
+  position: relative;
+}
+
+.bilibili::after {
+  content: "";
+  display: block;
+  padding-bottom: calc(100% / (16 / 9));
+}
+
+.bilibili > iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 7f46d01e..631d4050 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,6 +1,7 @@
 /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
 
 @import 'components/zen-mode.css';
+@import 'components/bilibili.css';
 
 @tailwind base;
 @tailwind components;
diff --git a/layouts/shortcodes/bilibili.html b/layouts/shortcodes/bilibili.html
new file mode 100644
index 00000000..7705a54b
--- /dev/null
+++ b/layouts/shortcodes/bilibili.html
@@ -0,0 +1,7 @@
+<div class="bilibili">
+  {{- if .IsNamedParams -}}
+      <iframe src="//player.bilibili.com/player.html?bvid={{ .Get `id` }}&page={{ .Get `p` | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+  {{- else -}}
+      <iframe src="//player.bilibili.com/player.html?bvid={{ .Get 0 }}&page={{ .Get 1 | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+  {{- end -}}
+</div>