diff --git a/src/index.html b/src/index.html
index d035d05..ecaa4f0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -54,21 +54,22 @@
             max-height: 100vh;
         }
         
-        /* 视频容器样式 - 支持双缓冲 */
+        /* 视频容器样式 - 支持双缓冲，固定9:16比例 */
         .video-container {
             position: relative;
-            width: 100vw;
+            width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
             height: 100vh;
             overflow: hidden;
             display: flex;
             align-items: center;
             justify-content: center;
+            margin: 0 auto; /* 水平居中 */
         }
         
         #recordedVideo, #recordedVideoBuffer {
             position: absolute;
-            width: 100%;
-            height: 100%;
+            width: 56.25vh; /* 9:16比例，高度为100vh时，宽度为100vh * 9/16 = 56.25vh */
+            height: 100vh;
             object-fit: cover;
             border-radius: 0;
             box-shadow: none;
@@ -133,16 +134,16 @@
             100% { transform: rotate(360deg); }
         }
         
-        /* 响应式设计 - 确保在不同屏幕尺寸下视频容器保持固定高度和居中 */
+        /* 响应式设计 - 确保在不同屏幕尺寸下视频容器保持9:16比例 */
         @media (max-width: 768px) {
             .video-container {
                 height: 100vh;
-                width: 100vw;
+                width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
             }
             
             #recordedVideo, #recordedVideoBuffer {
-                width: 100%;
-                height: 100%;
+                width: 56.25vh; /* 9:16比例 */
+                height: 100vh;
                 object-fit: cover;
             }
         }
@@ -150,12 +151,12 @@
         @media (min-width: 769px) {
             .video-container {
                 height: 100vh;
-                width: 100vw;
+                width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
             }
             
             #recordedVideo, #recordedVideoBuffer {
-                width: 100%;
-                height: 100%;
+                width: 56.25vh; /* 9:16比例 */
+                height: 100vh;
                 object-fit: cover;
             }
         }
@@ -164,6 +165,7 @@
         @media (orientation: landscape) and (max-height: 500px) {
             .video-container {
                 height: 100vh;
+                width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
             }
             
             .controls {
@@ -175,6 +177,7 @@
         @media (orientation: portrait) {
             .video-container {
                 height: 100vh;
+                width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
             }
         }