diff --git a/assets/css/_shortcodes/_douyin.scss b/assets/css/_shortcodes/_douyin.scss
new file mode 100644
index 00000000..091236fc
--- /dev/null
+++ b/assets/css/_shortcodes/_douyin.scss
@@ -0,0 +1,16 @@
+.douyin {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 60.725%;
+  margin: 3% auto;
+  text-align: center;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+}
diff --git a/assets/css/_shortcodes/_index.scss b/assets/css/_shortcodes/_index.scss
index e4b656a2..ae952e50 100644
--- a/assets/css/_shortcodes/_index.scss
+++ b/assets/css/_shortcodes/_index.scss
@@ -1,5 +1,6 @@
 @import '_admonition';
 @import '_bilibili';
+@import '_douyin';
 @import '_cardlink';
 @import '_center-quote';
 @import '_echarts';
diff --git a/layouts/shortcodes/douyin.html b/layouts/shortcodes/douyin.html
new file mode 100644
index 00000000..486261b1
--- /dev/null
+++ b/layouts/shortcodes/douyin.html
@@ -0,0 +1,7 @@
+{{- /* reference https://developer.open-douyin.com/docs/resource/zh-CN/dop/develop/openapi/video-management/douyin/iframe-player/get-iframe-by-video */ -}}
+{{- $id := cond .IsNamedParams (.Get "id") (.Get 0) -}}
+
+<div class="douyin">
+  <iframe src="//open.douyin.com/player/video?vid={{ $id }}&autoplay=0" border="0" framespacing="0" allowfullscreen="true"></iframe>
+</div>
+{{- /* EOF */ -}}