Question

我在视频背景上显示内容时遇到问题。我为应该出现在它上面的背景视频和div设置了正确的z索引，但它不起作用。如何在视频顶部显示内容？

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="css/video.css">
    <link rel="stylesheet" href="css/style.css">

    <meta charset="utf-8" />
    <meta name=”description” content=”” />
</head>
<body>
    <div class="wrapper">
        <div class="button">HELLO</div>
    </div>

    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
    <source src="img/splash.webm" type="video/webm"> 
    <source src="img/splash.mp4" type="video/mp4"> 
    <source src="img/splash.ogv" type="video/ogg ogv"; codecs="theora, vorbis"/> Video not supported </video>
</body>
</html>

CSS：

.wrapper {
    width: 960px;
    height: 100%;
    z-index: 20;
}

.button {
    z-index: 20;
    width: 300px;
    height: 300px;
}

#video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden
}

Answer 1

Solution to content on top of video background:

http://jsfiddle.net/N7rd4/

编辑：
除了嵌入另一个视频，我没有必要更改任何css代码，所以它似乎已经让它工作了。如果这是你需要的，请告诉我。

在视频背景上显示内容

1 个答案: