我太懂这个糟心的问题了——安卓端小米浏览器、UC浏览器这类应用会硬抢网页视频的播放权，用自带播放器接管后，页面的汉堡菜单直接被压在下面，哪怕把z-index拉到天上去也没用，连YouTube、Hotstar这种大厂平台都逃不过这个坑。下面是几个我实际调试过可行的方案，你可以挨个试试：

方案1：监听视频状态，动态切换菜单形态 #

这类浏览器的自带播放器层级是浏览器内核强制拉高的，网页层面根本抢不过。我们可以换个思路：在视频播放时，把原来的汉堡菜单换成一个更小、更灵活的悬浮按钮，避开播放器的控制区域；视频暂停后再恢复原菜单：

const targetVideo = document.querySelector('#your-video-element');
const mainHamburger = document.querySelector('#main-hamburger-menu');
const miniMenu = document.querySelector('#mini-player-menu');

// 视频开始播放时切换菜单
targetVideo.addEventListener('play', () => {
  mainHamburger.classList.add('hidden');
  miniMenu.classList.remove('hidden');
});

// 视频暂停/结束时恢复原菜单
targetVideo.addEventListener('pause', () => {
  mainHamburger.classList.remove('hidden');
  miniMenu.classList.add('hidden');
});

给迷你菜单设置position: fixed和足够高的z-index，再把它放在播放器控制栏不会覆盖的角落，比如右上角靠上的位置，记得加个纯色背景增强辨识度。

方案2：用私有属性强制视频内联播放 #

很多国产浏览器基于X5内核，提供了私有属性可以阻止浏览器唤起自带全屏播放器。给你的<video>标签加上这些属性试试：

<video 
  x5-playsinline="true" 
  playsinline="true" 
  webkit-playsinline="true"
  controls
>
  <source src="your-video-source.mp4" type="video/mp4">
</video>

x5-playsinline是X5内核的专属属性，能强制视频在页面原有位置播放，不触发全屏播放器。这样页面元素的层级逻辑就能正常生效，汉堡菜单的z-index设置也能起作用了。

方案3：用自定义播放器完全接管播放逻辑 #

如果上面的方法都不管用，那就直接用开源自定义播放器替代原生<video>标签，比如Video.js、Plyr这类。它们完全由网页控制播放逻辑和UI渲染，不会被浏览器强制替换成自带播放器，菜单的层级覆盖自然就没问题了。

方案4：针对特定浏览器做定向适配 #

先通过User-Agent判断当前是否是小米/UC浏览器，给页面加个专属类，然后针对性调整菜单样式：

const ua = navigator.userAgent.toLowerCase();
if (ua.includes('miuibrowser') || ua.includes('ucbrowser')) {
  document.body.classList.add('xiaomi-uc-browser');
}

然后在CSS里调整：

.xiaomi-uc-browser #main-hamburger-menu {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 99999;
  background: #ffffff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

这种方式相当于给特定浏览器的菜单开"绿色通道"，用更显眼的样式和更高的层级确保它不被遮挡。

这些方案可以根据你的页面结构灵活组合，建议先从方案2开始试，成本最低见效最快。

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