Footer文本无法渲染，Video组件底部文字不显示问题求助

问题根因 #

定位到两个导致Video组件Footer文字不显示的核心问题：

• Video组件外层容器未设置position: relative，你为Footer设置的position: absolute会基于整个视口定位，最终落在可视区域外
• Footer文字颜色被全局样式统一设置为和Footer背景色一致的白色，导致文字和背景融合不可见

修复方案 #

1. 给Video组件外层容器添加相对定位属性，修改Video.js内的容器样式：

// 原Video外层容器样式补充position属性
const VideoWrapper = styled.div`
  width: 100%;
  height: 500px;
  position: relative;
`

2. 显式指定Footer的文字颜色，覆盖全局样式影响：

// Footer样式补充文字颜色配置
const VideoFooter = styled.div`
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #000;
`

3. 可选排查项：如果修复后仍未显示，可检查Footer是否被设置了overflow: hidden、display: none属性，或是z-index值低于上层的视频蒙层，调整对应属性即可生效。

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