diff --git a/.file-name-linter.json b/.file-name-linter.json
index 208bcbbb3a9..7f36d51c6a1 100644
--- a/.file-name-linter.json
+++ b/.file-name-linter.json
@@ -6,7 +6,7 @@
     ],
     "docusaurus/static": [
       "^(\\.?)[0-9\\-a-z_]+(\\.?)",
-      "\\.(webp|pdf|zip|svg|css|ico|png|nojekyll|js|json)$"
+      "\\.(webp|pdf|zip|svg|css|ico|png|nojekyll|js|json|mp4)$"
     ]
   },
   "ignore": [
diff --git a/docusaurus/src/pages/features-section/features-section.css b/docusaurus/src/pages/features-section/features-section.css
index 7cdd5f2d7c3..a881c34651f 100644
--- a/docusaurus/src/pages/features-section/features-section.css
+++ b/docusaurus/src/pages/features-section/features-section.css
@@ -140,6 +140,11 @@
   margin-top: -5px;
 }
 
+#video {
+  width: 620px;
+  height: 380px;
+}
+
 #featuresSectionLowerWrapper {
   background-color: var(--ifm-hero-background-color);
   border-radius: 150px;
@@ -443,6 +448,11 @@
     margin-bottom: 50px;
   }
 
+  #videoPlaceholder {
+    width: 350px;
+    height: 200px;
+  }
+
   #featuresSectionLowerWrapper {
     border-radius: 70px;
   }
@@ -567,6 +577,11 @@
     margin-right: 40px;
   }
 
+  #videoPlaceholder {
+    width: 420px;
+    height: 250px;
+  }
+
   #featuresText {
     font-size: 20px;
     line-height: 30px;
diff --git a/docusaurus/src/pages/features-section/features-section.tsx b/docusaurus/src/pages/features-section/features-section.tsx
index 56c6aee6fef..b90114db0b7 100644
--- a/docusaurus/src/pages/features-section/features-section.tsx
+++ b/docusaurus/src/pages/features-section/features-section.tsx
@@ -86,7 +86,13 @@ const FeaturesSection = () => {
             <p id="featuresListing">Multi-platform support.</p>
             <p id="featuresListing">Friendship managment.</p>
           </div>
-          <div id="videoPlaceholder" />
+          <div id="videoPlaceholder">
+            <video controls
+              id="video"
+              src="img/introduction-video.mp4" 
+              type="video/mp4"
+            />
+          </div>
         </div>
         <div id="featuresSectionLowerWrapper">
           <div id="featuresNumberWrapper">
diff --git a/docusaurus/static/img/introduction-video.mp4 b/docusaurus/static/img/introduction-video.mp4
new file mode 100644
index 00000000000..b03f6ea542f
Binary files /dev/null and b/docusaurus/static/img/introduction-video.mp4 differ
diff --git a/package.json b/package.json
index cf5907342f5..209b3780f44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wechaty-docusaurus",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "Wechaty Official Website for Documentations",
   "private": true,
   "type": "module",