diff --git a/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js b/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
index 693e291..5125207 100644
--- a/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
@@ -1,9 +1,13 @@
+import { useSize } from "ahooks";
 import { Spin } from "antd";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Video from "zy-react-library/components/Video";
 import styles from "./index.module.less";
 
 function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
+  // Video 组件需要明确的像素高度，直接传百分比时无法从 Grid/Flex 容器解析出高度。
+  const videoContainerRef = useRef(null);
+  const videoContainerSize = useSize(videoContainerRef);
   const [loading, setLoading] = useState(true);
   const [playUrl, setPlayUrl] = useState("");
 
@@ -30,11 +34,13 @@ function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
   return (
     <div className={styles.branchOfficeCameraModal__video}>
       <div className={styles.branchOfficeCameraModal__videoName}>{videoName}</div>
-      <Spin spinning={loading}>
-        {playUrl
-          ? <Video inline height="100%" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
-          : <div className={styles.branchOfficeCameraModal__empty}>暂无视频</div>}
-      </Spin>
+      <div ref={videoContainerRef} className={styles.branchOfficeCameraModal__videoContent}>
+        <Spin spinning={loading}>
+          {playUrl
+            ? <Video inline height={`${videoContainerSize?.height || 1}px`} width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
+            : <div className={styles.branchOfficeCameraModal__empty}>暂无视频</div>}
+        </Spin>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less
index 6547f32..594c223 100644
--- a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less
+++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less
@@ -92,13 +92,18 @@
             white-space: nowrap;
           }
 
-          :global {
-            .@{ant-prefix}-spin-nested-loading {
-              flex: 1;
-              min-height: 0;
+          .branchOfficeCameraModal__videoContent {
+            flex: 1;
+            min-height: 0;
+            overflow: hidden;
 
-              .@{ant-prefix}-spin-container {
+            :global {
+              .@{ant-prefix}-spin-nested-loading {
                 height: 100%;
+
+                .@{ant-prefix}-spin-container {
+                  height: 100%;
+                }
               }
             }
           }