Question

我需要在视频上显示播放按钮。我尝试使用z-index。但它似乎不起作用。以下是html代码

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>text</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body style="overflow: hidden; margin: 0px;">
        <div id="d1">
            <video id="videoID" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" autoplay>
            <div id="d2">
                <h1 id="h">I am heading</h1>
                <!--<button type="button" id="play-pause" class="play">Play</button>-->
            </div>
        </div>
    </body>
</html>

CSS：

#d1
{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    color: #2c3e50;
    margin-top: 10px;
    width: 55%
}

#videoID
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
}

#d2 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 15;
    left: 100px;
    top: 100px;
}

＆＃39;职位：绝对＆＃39;应在视频顶部显示标题。它没有用。我将d2的z-index添加到15.但它仍然没有帮助。我无法在视频上显示按钮。如果有任何问题以及如何解决，有人可以帮助我。

Answer 1

<video>不是自闭元素。 Info from MDN

＆＃13;

#d1 {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin-top: 10px;
  width: 55%
}

#videoID {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

#d2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  z-index: 15;
  left: 100px;
}

＆＃13;

<div id="d1">
  <video id="videoID" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" autoplay></video>
  <div id="d2">
    <h1 id="h">I am heading</h1>
    <button type="button" id="play-pause" class="play">Play</button>
  </div>
</div>

＆＃13;

无法使用z-index在视频上显示按钮或文本

1 个答案: