React-Player手机端9:16视频背景适配问题求助

针对你提出的9:16视频背景在手机屏幕适配不良的问题，结合现有代码给出以下修改思路和代码调整方案：

核心问题分析 #

当前代码中，视频元素的width:auto和height:-webkit-fill-available强制设置，加上父容器无比例约束，导致视频在不同屏幕宽高比下出现拉伸、留白或裁剪不当的情况。需要通过固定比例容器+绝对定位视频的方式，确保视频始终维持9:16比例并铺满首屏，同时不覆盖waitlist模块。

具体代码调整 #

1. 调整Landing区域CSS #

确保首屏容器为相对定位，限制溢出，同时维持100vh高度：

.Landing_landing__Zl8P7 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative; /* 作为视频容器的定位基准 */
    overflow: hidden; /* 避免视频超出首屏范围 */
}

2. 修改父容器（Landing_left__t2dm2）CSS #

构建9:16固定比例容器，同时适配不同屏幕：

.Landing_left__t2dm2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 177.78%; /* 9/16*100% = 177.78%，实现9:16固定比例 */
    max-height: 100vh; /* 限制容器高度不超过屏幕 */
    max-width: calc(100vh * 9 / 16); /* 宽屏时限制容器宽度，维持比例 */
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

3. 优化视频元素（Video_video__AXELc）CSS #

让视频绝对定位铺满比例容器，保证无变形：

.Video_video__AXELc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 视频裁剪适配容器，保持比例不变形 */
    z-index: -1; /* 作为背景，置于底层 */
    transform: translate3d(0, 0, 0);
}

4. 确保waitlist模块不被覆盖 #

给waitlist模块添加相对定位和更高的层级：

/* 替换为你的waitlist模块实际类名 */
.Waitlist_waitlist__xxx {
    position: relative;
    z-index: 10; /* 高于视频的z-index，确保显示在最上层 */
}

关键逻辑说明 #

• 固定比例容器：通过padding-top:177.78%实现9:16比例，这是响应式固定比例布局的标准方案，避免视频因屏幕尺寸变化变形。
• 绝对定位视频：让视频完全填充比例容器，object-fit:cover保证视频在容器内居中裁剪，既铺满容器又维持原始比例。
• 宽高限制：max-height和max-width确保在宽屏手机上，视频不会超出屏幕范围，同时保持9:16的核心比例。

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