如何居中react-youtube组件的YouTube视频并实现响应式？

你的问题核心在于两处细节：CSS语法错误导致居中逻辑失效，以及固定宽高配置破坏了响应式布局。以下是具体修复方案：

1. 修复CSS语法错误 #

你的.video-container样式中，height属性的注释未闭合，直接导致样式解析异常，先修正这个问题：

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* 修复注释未闭合问题 */
    height: 100%;
}

2. 重构响应式视频容器 #

固定宽高的height:350和width:640会让视频无法自适应屏幕，我们用比例容器实现真正的响应式，同时确保视频居中：

修改后的CSS #

.video-container {
    width: 100%;
    max-width: 640px; /* 限制视频最大宽度，避免大屏下尺寸过大 */
    margin: 0 auto; /* 直接实现水平居中 */
    position: relative;
    padding-top: 56.25%; /* 16:9视频比例，确保容器高度随宽度自适应 */
}

.video-container .react-youtube-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

修改React代码中的配置 #

将固定宽高改为100%，让视频继承容器尺寸，同时给组件添加类名方便样式定位：

const opts: YouTubeProps['opts'] = {
    height: '100%',
    width: '100%',
    playerVars: {
        autoplay: 1,
    },
};

// 给YouTube组件添加类名
return <div className='video-container'><YouTube className="react-youtube-player" videoId="Zu8MYX5h4x8" opts={opts} onReady={onPlayerReady} /></div>;

3. 确保父容器不限制宽度 #

检查titleSponsor类的样式，确保它没有设置固定宽度或溢出限制，让视频容器能正常占满可用宽度：

.titleSponsor {
    width: 100%;
    padding: 0 1rem; /* 可选：添加左右内边距，避免视频贴边 */
}

方案说明 #

• margin:0 auto是块级元素水平居中的最简实现，适配这种单元素居中场景更直接
• padding-top:56.25%是16:9视频的标准比例配置，能让容器高度随宽度自动调整，保持视频比例不变
• 设置视频宽高为100%，让它完全填充比例容器，实现真正的响应式
• 限制最大宽度避免超大屏幕下视频尺寸失控，提升观感

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