在視頻背景上顯示內容

我有問題顯示視頻背景上的內容。我爲背景視頻和應該出現在其上的背景視頻和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

在視頻背景上顯示內容

回答

相關問題