在视频背景上显示内容

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

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 
}

来源

2013-06-30 user2535684

Solution to content on top of video background:

http://jsfiddle.net/N7rd4/

编辑：
除了嵌入另一个视频中，我并没有改变任何你的CSS代码，所以它似乎你已经有它的工作。让我知道这是否是你需要的。

来源

2013-06-30 03:12:02

是的，谢谢抱歉。我一直在工作。这只是默认字体大小“你好”，我看不到，并认为有些东西没有工作:) – user2535684

在视频背景上显示内容

回答

相关问题