如何移除网站背景视频鼠标悬停时显示的最小化播放图标？

方法1：移除controls属性 #

你的video标签里包含了controls属性，这是浏览器显示默认播放控制（包括悬停时的播放图标）的核心原因。直接去掉该属性，就能彻底消除相关控制元素：

<video autoplay muted loop playsinline style="pointer-events: none;">
  <source src="./assets/sfx/Teaser.mp4" type="video/mp4" />
</video>

方法2：CSS强制隐藏控制元素（备用） #

如果因特殊需求必须保留controls属性，可通过CSS覆盖浏览器默认样式，强制隐藏所有控制相关组件：

/* 适配WebKit内核浏览器（Chrome、Safari等） */
video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* 适配Firefox */
video::-moz-media-controls {
  display: none !important;
}

/* 适配Edge/IE */
video::-ms-media-controls {
  display: none !important;
}

补充说明 #

• pointer-events: none已能阻止用户点击视频，但controls属性才是触发悬停图标的根源，优先移除它是最简洁的解决方式。
• playsinline属性用于确保视频在移动端内联播放，不会自动全屏，建议保留。

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