React项目中MP4视频无法适配Material UI Box横竖屏及高度调整问题

问题核心原因 #

原生video标签默认会按照视频原始宽高比撑开父容器，你当前的样式缺少两个关键配置：

• 未给video标签设置缩放规则，限制其不超出父容器边界
• 父容器缺少对齐规则，避免视频溢出

修正后的样式代码 #

const styles = theme => ({
    viewerWrapperMp4: {
        background: 'black',
        width: '100%',
        height: '20vw',
        // 新增以下三行，控制子元素居中
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    viewerMp4: {
        // 替换原宽高配置，限制视频最大宽高不超出父容器
        maxWidth: '100%',
        maxHeight: '100%',
        // 新增object-fit，保持视频宽高比自适应
        objectFit: 'contain',
    },
    outer: {
        height: '100%',
        width: '100%',
        position: 'relative',
        overflow: 'hidden',
    },
});

绑定检查 #

确认你的video标签已经正确绑定样式类，参考示例：

<Box className={classes.viewerWrapperMp4}>
  <video
    className={classes.viewerMp4}
    src="你的视频资源地址"
    controls
  />
</Box>

如果外层还有其他嵌套容器，确保上层容器没有设置height: auto阻断高度继承即可。

内容的提问来源于stack exchange，提问作者Kid