如何用CSS移除HTML视频上的透明灰色覆盖层？

HTML视频在桌面端顶部存在一层透明灰色覆盖层，移动端无此问题，且覆盖层颜色会随浏览器不同而变化。推测这可能与控件/选中状态有关，但不确定。尝试修改视频背景色等CSS操作均无效，现附上相关代码，求用CSS移除该覆盖层的方法。

HTML代码 #

<div data-pf-type="HTML.Video" class="sc-khQegj xLZop pf-17_">
  <video width="100%" 
         type="video/mp4?v=1680101963" 
         src="https://cdn.shopify.com/s/files/1/0727/5128/4563/t/2/assets/file.mp4?v=1680101963" 
         loop="" muted="" playsinline="" autoplay="" 
         controlslist="nodownload" 
         disablepictureinpicture="">
  </video>
</div>

当前CSS代码 #

element.style {
}
.xLZop video {
display: flex;
height: auto;
border-radius: inherit;
}

.fWMPub[class*=pf-c-], .xLZop video {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
}

.__pf img, .__pf video {
max-width: 100%;
border: 0;
vertical-align: middle;
}

.__pf *, .__pf :after, .__pf :before {
box-sizing: border-box;
}
img, video {
height: auto;
max-width: 100%;
border-style: none;
vertical-align: top;
}

*, *:before, *:after {
box-sizing: border-box!important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

video[Attributes Style] {
width: 100%;
}

/* 用户代理样式 */
video {
object-fit: contain;
overflow-clip-margin: content-box;
overflow: clip;
}

这个透明灰色覆盖层基本是桌面端浏览器默认的视频控件容器样式，不同浏览器会给控件面板添加半透明背景，移动端控件逻辑不同所以无此问题。可以通过重置各浏览器的视频控件伪元素样式来移除：

/* 处理Chrome、Safari等WebKit内核浏览器 */
video::-webkit-media-controls-panel {
  background: none !important;
}

/* 处理Firefox */
video::-moz-media-controls-panel {
  background: none !important;
}

/* 处理Edge */
video::-ms-media-controls-panel {
  background: none !important;
}

/* 移除控件选中/聚焦时的高亮背景 */
video::-webkit-media-controls-panel:focus {
  outline: none !important;
  background: none !important;
}

如果上述代码无效，需要排查父容器是否存在额外的伪元素（如::before/::after）导致覆盖层，可添加以下代码排除：

.xLZop::before, .xLZop::after {
  display: none !important;
}

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