fix: scale (#202)

diff --git a/layouts/shortcodes/bilibili.html b/layouts/shortcodes/bilibili.html
index 3badb35..c04b73e 100644
--- a/layouts/shortcodes/bilibili.html
+++ b/layouts/shortcodes/bilibili.html
@@ -2,7 +2,7 @@
 {{ $pageNum := index .Params 1 | default 1}}
 
 {{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID) }}
-<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" width="100%" height="500"> </iframe></div>
+<div class="bilibili-container"><iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy"> </iframe></div>
 {{ else }}
-<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" width="100%" height="500"> </iframe></div>
+<div class="bilibili-container"><iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy"> </iframe></div>
 {{ end }}
diff --git a/themes/docsy/assets/scss/_blog.scss b/themes/docsy/assets/scss/_blog.scss
index 475e40d..f96ff5a 100644
--- a/themes/docsy/assets/scss/_blog.scss
+++ b/themes/docsy/assets/scss/_blog.scss
@@ -75,3 +75,19 @@
   }
 }
 
+.bilibili-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 57%;
+  margin: 3% auto;
+  text-align: center;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+}