javascript - DIV 在 html5 视频之上

Question

我遇到了麻烦，需要帮助!我正在尝试使用视频作为背景，然后将文本和图像放在它上面的 div 中。

这是我目前所拥有的:

<section id="VideoSection>  
    <div id="VideoText">Testing 123</div>
    <video autoplay loop poster="polina.jpg" id="bgvid">
        <source src="movie.mp4" type="video/webm">
    </video>
</section>

这是我的 CSS:

video#bgvid {
    z-index: -2;
}

#VideoText{
    position: absolute;
    z-index: -1;
}

Answer 1

-DEMO-

<section id="VideoSection">

    <div id="VideoText">Testing 123</div>
    <video id=bgvid autoplay muted poster="http://media.w3.org/2010/05/bunny/poster.png">
        <source id="mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
        <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
        <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
 </section>

CSS:

video#bgvid {
    z-index: -2;
}

#VideoText{
    position: absolute;
    z-index: 1;
}

然后将 position:relative; 添加到 #VideoSection 以便您可以在文本上使用绝对位置

#VideoSection{
    position:relative;
}

-Demo-