apps/web/src/pages/generate/components/PreviewVideoPanel.tsx

@@ -169,6 +169,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   const isLoading = previewStatus === "pending" || previewStatus === "generating"
   const isError = previewStatus === "error"
   const showTitlePreview = !!titleSettings
+  const videoAspectStyle = { aspectRatio: (videoRatio || "16:9").replace(":", "/") }
 
   // video 模式 refs
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -310,7 +311,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       {/* 生成中 */}
       {isLoading && (
         <div className="xx-preview-loading-panel">
-          <div className="xx-preview-video">
+          <div className="xx-preview-video" style={videoAspectStyle}>
             <div className="xx-preview-loading-center">
               <LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
               <p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
@@ -327,7 +328,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       {/* 生成失败 */}
       {isError && (
         <div className="xx-preview-error-panel">
-          <div className="xx-preview-video xx-preview-video--error">
+          <div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
             <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
           </div>
           <p className="xx-preview-error-msg">
@@ -342,7 +343,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       {/* 预览成功 + Canvas 标题叠加 */}
       {hasPreview && (
         <div ref={containerRef} style={{ position: "relative" }}>
-          <div className="xx-preview-video">
+          <div className="xx-preview-video" style={videoAspectStyle}>
             <video
               ref={videoRef}
               src={previewResult.videoUrl}

apps/web/src/pages/generate/generate.css

@@ -891,7 +891,7 @@
 
 /* ── 视频预览 ── */
 .xx-preview-video {
-  aspect-ratio: 9 / 16;
+  aspect-ratio: 16 / 9;
   max-height: 400px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, var(--color-gray-900), var(--color-primary-900));
@@ -2647,7 +2647,7 @@
 .xx-preview-video-wrapper .xx-preview-video {
   max-width: 300px;
   width: 100%;
-  aspect-ratio: 9 / 16;
+  aspect-ratio: 16 / 9;
   margin-bottom: 0;
 }