diff --git a/package.json b/package.json
index 85294742..0bbcdbd3 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
     "d3": "^7.8.5",
-    "dumi": "^2.0.0-beta.15",
+    "dumi": "~2.2.1",
     "gh-pages": "^3.1.0",
     "husky": "^8.0.2",
     "lodash": "^4.17.20",
diff --git a/site/components/ComplexCharts/index.tsx b/site/components/ComplexCharts/index.tsx
index c7c1e2dd..30119502 100644
--- a/site/components/ComplexCharts/index.tsx
+++ b/site/components/ComplexCharts/index.tsx
@@ -51,7 +51,8 @@ export function ComplexCharts() {
           src={select.video}
           autoPlay
           loop
-          style={{ objectFit: 'fill' }}
+          // @ts-ignore
+          style={{ objectFit: select.objectFit || 'fill' }}
         />
       </a>
     </div>
diff --git a/site/data/complex-charts.json b/site/data/complex-charts.json
index 631bac10..5fd9280e 100644
--- a/site/data/complex-charts.json
+++ b/site/data/complex-charts.json
@@ -19,5 +19,13 @@
     "link": "https://g2.antv.antgroup.com/examples/storytelling/storytelling/#stocks-keyframe",
     "img": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yrlSTZeONjUAAAAAAAAAAAAADmJ7AQ/original",
     "activeImg": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HG6pSovStWgAAAAAAAAAAAAADmJ7AQ/original"
+  },
+  {
+    "text": "WebXR",
+    "video": "https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/StguTYJvYQMAAAAAAAAAAAAAVoeUAQBr",
+    "link": "https://5mxqzn.csb.app/",
+    "img": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*RFK7R4TWuWQAAAAAAAAAAAAADmJ7AQ/original",
+    "activeImg": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NYQ-SLUYDpMAAAAAAAAAAAAADmJ7AQ/original",
+    "objectFit": "contain"
   }
 ]