HTML+CSS实现双视频播放器布局：远程全屏、本地小窗显示

问题核心原因：两个播放器共用了.player通用类，直接修改这个类的宽高属性会匹配所有带该类的元素，无法实现单独控制。
实现逻辑：

• 远程摄像头播放器作为底层，铺满整个浏览器视口
• 本地摄像头播放器作为悬浮层，以小窗形式固定在视口角落，层级高于远程播放器避免被遮挡

代码修改方案 #

原有HTML结构无需大幅调整，直接替换CSS样式即可，核心是通过ID选择器分别给两个播放器写专属样式，避免样式互相污染。

修改后完整CSS代码 #

/* 基础重置，清除默认边距让页面撑满视口 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 播放器公共样式，仅放通用属性，不写固定尺寸 */
.player {
  background: #000;
  object-fit: cover;
}

.player-name {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 0 2px #000;
  z-index: 101;
}

#success-alert, #success-alert-with-token {
  display: none;
}

/* 远程播放器专属样式：全屏铺满视口，置于底层 */
#remote-playerlist .player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

/* 本地播放器专属样式：小窗悬浮在右下角，置于上层 */
#local-player {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 240px;
  height: 180px;
  z-index: 100;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* 移动端适配，缩小本地小窗尺寸 */
@media (max-width: 640px) {
  #local-player {
    width: 160px;
    height: 120px;
    right: 12px;
    bottom: 12px;
  }
}

关键说明 #

• 通用.player类只保留背景、画面填充模式这类两个播放器共用的样式，尺寸、定位这类差异化属性，通过唯一ID选择器分别匹配，从根源避免样式联动
• 全屏播放器使用100vw/100vh单位匹配视口宽高，通过position: fixed固定在视口位置，低z-index作为背景层
• 本地小窗同样使用fixed定位，设置更高的z-index保证悬浮在远程播放器上方，位置、尺寸可以根据需求自行调整right/bottom/width/height属性
• 给html、body设置overflow: hidden避免页面出现多余滚动条，object-fit: cover保证视频画面填充容器时不会拉伸变形

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