HTML5内联视频忽略z-index

在HTML5中，内联视频默认会覆盖其他元素，无论z-index值如何设置。但是，可以通过一些技巧来解决这个问题。以下是一种解决方法，其中包含了代码示例：

方法一：使用CSS的position属性和z-index属性

首先，将视频的position属性设置为absolute或fixed，这样它就可以脱离文档流，并且可以通过z-index属性进行控制。然后，将视频的z-index属性设置为一个较低的值，以确保其他元素可以覆盖在其上面。

HTML代码：

<div class="video-container">
  <video src="video.mp4" autoplay controls></video>
</div>

CSS代码：

.video-container {
  position: relative;
}

.video-container video {
  position: absolute;
  z-index: 1;
}

在上面的示例中，我们将视频容器的position属性设置为relative，以便视频元素可以相对于其进行定位。然后，将视频元素的position属性设置为absolute，并将其z-index属性设置为1。

这样，其他元素就可以通过调整它们的z-index值来覆盖视频了。

请注意，如果其他元素的z-index值也为1或更高，它们可能仍然会被视频覆盖。因此，您可能需要根据实际情况适当调整其他元素的z-index值。

这只是一种解决方法，具体取决于您的页面结构和需求。