幕布滑动时div遮挡视频无法点击及视频未居中问题修复咨询

问题1：幕布滑动过程中视频区域无法点击 #

产生原因 #

左右幕布元素（.panel-left/.panel-right）、播放按钮容器（.split-wrap）仅通过transform位移实现滑动效果，滑动过程中及滑动完成后仍处于更高层级，且未禁用点击事件，完全遮挡了下层的视频容器，导致点击无法触发视频区域的交互。

修复方法 #

1. 新增CSS规则，滑动状态下给遮挡元素禁用点击拦截，同时提升视频容器层级：

.curtain.slide .panel-left,
.curtain.slide .panel-right,
.curtain.slide .split-wrap {
  pointer-events: none;
}
.curtain.slide .container {
  z-index: 10;
}

2. 若需要滑动完成后彻底释放遮挡元素占用的层级，可在JS中监听滑动动画结束事件，添加隐藏逻辑，修改原coverClickHandler函数：

function coverClickHandler(evt) {
  const cover = evt.currentTarget;
  hide(cover);
  const curtain = document.querySelector(".curtain");
  curtain.classList.add("slide");
  const thewrap = curtain.parentElement.querySelector(".container");
  show(thewrap);
  // 监听滑动动画结束后隐藏遮挡元素
  curtain.querySelector('.panel-left').addEventListener('transitionend', () => {
    curtain.querySelector('.panel-left').classList.add('hide');
    curtain.querySelector('.panel-right').classList.add('hide');
    curtain.querySelector('.split-wrap').classList.add('hide');
  }, {once: true});
}

问题2：幕布完全展开后视频未居中显示 #

产生原因 #

视频容器外层的.container设置了绝对定位，脱离了父级.tcell的表格垂直居中布局流，仅给.video-wrapper设置了水平居中的margin: auto，缺少垂直居中规则。

修复方法 #

修改.container的CSS规则，使用flex布局实现内部视频的水平+垂直居中：

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  /* 新增以下两行 */
  display: flex;
  align-items: center;
}

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