如何使video player可见？含固定布局需求及相关代码

核心问题（视频不可见的原因） #

原代码中.videoPlayerContainer设置了flex-direction: column，但.leftBar的高度设为100vh，直接占满容器全部高度，导致.videoPlayerWrapper和.bottomBar被挤出视口，视频完全不可见。

布局修正方案（满足固定栏+16:9视频需求） #

调整布局结构，拆分主内容区（侧边栏+视频）和底部栏，同时用padding-top技巧实现视频的16:9比例约束：

修改后的CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.videoPlayerContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 主内容区：侧边栏+视频容器 */
.mainContent {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.leftBar {
  width: 10%;
  background-color: #333;
}

.bottomBar {
  height: 10vh;
  background-color: #333;
  z-index: 1;
}

.videoPlayerWrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* 16:9比例：padding-top = 9/16 * 100% = 56.25% */
  padding-top: 56.25%;
}

#videoPlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: black;
}

修改后的HTML代码

<div class="videoPlayerContainer">
  <div class="mainContent">
    <div class="leftBar"></div>
    <div class="videoPlayerWrapper">
      <video id="videoPlayer" controls muted></video>
    </div>
  </div>
  <div class="bottomBar"></div>
</div>

关键调整说明 #

1. 新增.mainContent容器，用flex:1占据除底部栏外的全部空间，内部横向排列侧边栏和视频
2. 移除.leftBar的height:100vh，让它自动填充主内容区高度
3. .videoPlayerWrapper通过padding-top:56.25%实现16:9比例约束，视频绝对定位填充整个容器，保证比例不变
4. 添加全局样式box-sizing: border-box避免布局偏移

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