如何在背景视频上叠加文字？

Question

我正在尝试使用 div 标签为我的网站使用不同的视频，我还想覆盖要显示的文本。 但是每当我做一些事情并在 div 中使用另一个视频作为背景时，它就会只显示一个完整的<html>视频，而不是另一个。
我的代码如下。

<div class="video-overlay"></div>

<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>

现在，如果我放了另一个背景视频，那么它就不会显示……只有第一个视频才会显示。

Answer 1

 .container { position:relative; } .container video { position:relative; z-index:0; } .overlay { position:absolute; top:0; left:0; z-index:1; }

 <div class="container"> <video id="video" width="770" height="882" onclick="play();"> <source src="video/Motion.mp4" type="video/mp4" /> </video> <div class="overlay"> <p>Content above your video</p> <form> <p>Content Below Your Video</p> <label for="input">Form Input Label</label> <input id="input" name="input" value="" /> <button type="submit">Submit</button> </form> </div> </div>

或

<video loop autoplay muted poster="path/to/screenshot.jpg">
    <source src="path/to/video.webm" type="video/webm">
    <source src="path/to/video.ogg" type="video/ogg">
    <source src="path/to/video.mp4" type="video/mp4">
</video>

Answer 2

您可以简单地使用 CSS。

 .video-overlay{ position:absolute; z-index:9999999999; }

 <div class="video-overlay">Any Text</div> <video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>