如何使用CSS webkit属性隐藏HTML video标签红色标注的控制栏图标

方案1：使用HTML原生属性配置（最简单） #

直接在<video>标签上添加对应属性即可：

• 隐藏下载按钮：添加controlsList="nodownload"属性
• 隐藏画中画按钮：添加disablePictureInPicture属性
• 同时隐藏下载、全屏按钮可直接配置：

<video controls controlsList="nodownload nofullscreen" disablePictureInPicture>
  <source src="your-video.mp4" type="video/mp4">
</video>

方案2：使用CSS伪元素隐藏 #

针对webkit内核浏览器，可以通过指定伪元素样式隐藏对应按钮：

/* 隐藏下载按钮 */
video::-webkit-media-controls-download-button {
  display: none !important;
}
/* 隐藏画中画按钮 */
video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}
/* 隐藏全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
/* 如果需要批量隐藏右侧所有额外按钮，可直接隐藏溢出部分 */
video::-webkit-media-controls-enclosure {
  overflow: hidden !important;
}

方案3：自定义控制栏（灵活度最高） #

如果对控制栏的定制需求较多，建议直接关闭原生controls属性，自己通过JavaScript调用视频API实现播放、暂停、进度调节等控制功能，完全自定义控制栏样式，从根源上避免多余按钮的问题。

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